javascript - Using fetch() in function results in "output not defined" - Stack Overflow

admin管理员组

文章数量:1022743

I have been using Zapier for several weeks now and as per normal, our needs and wants have bee more plex as we build each feature. Hence my current issue with some JavaScript in a "Code by Zapier".

Note for any answer: Myself and the team of programmers I have available are not JavaScript experts but we do understand most concepts.

Aim: To make a fetch() call only if an input to the javascript is true.

Problem: Zapier always returns "output not defined" when the fetch() is included in the code.

ReferenceError: output is not defined theFunction

ie: The overall code structure is ok, the way I am using fetch() and returning and processing is not.

I have tried a gazillion variations and utilised some great posts here, but nothing solved the issue.

The simplified code looks like this:

 //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    output = {id: 2};
}

I believe it is the way I am either returning from the fetch() or the asynchronous nature of JavaScript.

Note: Zapier predefines the 'input' and 'output' variables for me. 'output' is initially Null and a value must be set by the code.

I have been using Zapier for several weeks now and as per normal, our needs and wants have bee more plex as we build each feature. Hence my current issue with some JavaScript in a "Code by Zapier".

Note for any answer: Myself and the team of programmers I have available are not JavaScript experts but we do understand most concepts.

Aim: To make a fetch() call only if an input to the javascript is true.

Problem: Zapier always returns "output not defined" when the fetch() is included in the code.

ReferenceError: output is not defined theFunction

ie: The overall code structure is ok, the way I am using fetch() and returning and processing is not.

I have tried a gazillion variations and utilised some great posts here, but nothing solved the issue.

The simplified code looks like this:

 //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    output = {id: 2};
}

I believe it is the way I am either returning from the fetch() or the asynchronous nature of JavaScript.

Note: Zapier predefines the 'input' and 'output' variables for me. 'output' is initially Null and a value must be set by the code.

• javascript
• asynchronous
• zapier
• fetch-api

Share Improve this question Follow edited Jan 22, 2016 at 3:21 Bergi 667k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Jan 22, 2016 at 1:21 Look LeftLook Left 1,33533 gold badges1515 silver badges2020 bronze badges 7

• Here: callback(null, output);, you are referencing the output variable that is not defined and thus causes an error. Did you mean for it to be callback(null, response)? – jfriend00 Commented Jan 22, 2016 at 1:33
• @jfriend00 Sorry, my typo when simplifying the code for the post. Fixed. Yes I am using callback(null, response) – Look Left Commented Jan 22, 2016 at 1:38
• What line of code is causing the error? FYI, when you do this output = {id: 2};, output is still not defined. This would create an implicit global except in strict mode, it would cause an error. – jfriend00 Commented Jan 22, 2016 at 1:39
• Specifically I don't know, that's my problem. But if I remove the fetch() from the function and just return a known response, eg: return {id: 1}; then it works. So it bees coding 101. Hence I believe it is the way I am calling and returning from the asynchronous fetch() and how it interacts with other statements that causes the issue. – Look Left Commented Jan 22, 2016 at 1:45
• You need to add try/catch handlers and output the exception to find out exactly which line of code is causing the problem. You have to debug the problem to get more info. Or, you can set breakpoints and step through all relevant code to see where it throws. Debugging is generally a systematic process of gathering information with debugging tools or code instrumentation and then narrowing in on the cause, not usually a process where we can guess by looking at your code. Your next step is to find the exact line of code that causes the error. – jfriend00 Commented Jan 22, 2016 at 1:46

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

This function is incorrect:

//This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json(); // <-- response is an string. This method is not defined.
        });
}

fetch() resolves in a response object which has methods for reading the body as text or JSON with .text() and .json() respectively. The resolving value for .text() is a string that does not have the method .json(). If you want to simply parse the body as a JSON use:

//This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.json();
        });
}

For anyone else encountering this problem:

I found that if I use a fetch call to return asynchronously via Zapier's "callback" method from inside an if statement, then I had to use "callback" to also return from all other control paths within the script, otherwise I would receive "ReferenceError: output is not defined theFunction". I don't know why this worked, but it did.

For example, something like this worked for me:

    //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    //output = {id: 2};
    //Use 'callback' instead of output
    callback(null, {id: 2});
}

I have been using Zapier for several weeks now and as per normal, our needs and wants have bee more plex as we build each feature. Hence my current issue with some JavaScript in a "Code by Zapier".

Note for any answer: Myself and the team of programmers I have available are not JavaScript experts but we do understand most concepts.

Aim: To make a fetch() call only if an input to the javascript is true.

Problem: Zapier always returns "output not defined" when the fetch() is included in the code.

ReferenceError: output is not defined theFunction

ie: The overall code structure is ok, the way I am using fetch() and returning and processing is not.

I have tried a gazillion variations and utilised some great posts here, but nothing solved the issue.

The simplified code looks like this:

 //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    output = {id: 2};
}

I believe it is the way I am either returning from the fetch() or the asynchronous nature of JavaScript.

Note: Zapier predefines the 'input' and 'output' variables for me. 'output' is initially Null and a value must be set by the code.

I have been using Zapier for several weeks now and as per normal, our needs and wants have bee more plex as we build each feature. Hence my current issue with some JavaScript in a "Code by Zapier".

Note for any answer: Myself and the team of programmers I have available are not JavaScript experts but we do understand most concepts.

Aim: To make a fetch() call only if an input to the javascript is true.

Problem: Zapier always returns "output not defined" when the fetch() is included in the code.

ReferenceError: output is not defined theFunction

ie: The overall code structure is ok, the way I am using fetch() and returning and processing is not.

I have tried a gazillion variations and utilised some great posts here, but nothing solved the issue.

The simplified code looks like this:

 //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    output = {id: 2};
}

I believe it is the way I am either returning from the fetch() or the asynchronous nature of JavaScript.

Note: Zapier predefines the 'input' and 'output' variables for me. 'output' is initially Null and a value must be set by the code.

• javascript
• asynchronous
• zapier
• fetch-api

Share Improve this question Follow edited Jan 22, 2016 at 3:21 Bergi 667k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Jan 22, 2016 at 1:21 Look LeftLook Left 1,33533 gold badges1515 silver badges2020 bronze badges 7

• Here: callback(null, output);, you are referencing the output variable that is not defined and thus causes an error. Did you mean for it to be callback(null, response)? – jfriend00 Commented Jan 22, 2016 at 1:33
• @jfriend00 Sorry, my typo when simplifying the code for the post. Fixed. Yes I am using callback(null, response) – Look Left Commented Jan 22, 2016 at 1:38
• What line of code is causing the error? FYI, when you do this output = {id: 2};, output is still not defined. This would create an implicit global except in strict mode, it would cause an error. – jfriend00 Commented Jan 22, 2016 at 1:39
• Specifically I don't know, that's my problem. But if I remove the fetch() from the function and just return a known response, eg: return {id: 1}; then it works. So it bees coding 101. Hence I believe it is the way I am calling and returning from the asynchronous fetch() and how it interacts with other statements that causes the issue. – Look Left Commented Jan 22, 2016 at 1:45
• You need to add try/catch handlers and output the exception to find out exactly which line of code is causing the problem. You have to debug the problem to get more info. Or, you can set breakpoints and step through all relevant code to see where it throws. Debugging is generally a systematic process of gathering information with debugging tools or code instrumentation and then narrowing in on the cause, not usually a process where we can guess by looking at your code. Your next step is to find the exact line of code that causes the error. – jfriend00 Commented Jan 22, 2016 at 1:46

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

This function is incorrect:

//This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        })
        .then(function(response) {
            //Hardcode a return.
            console.log("3. Returning Response");
            return response.json(); // <-- response is an string. This method is not defined.
        });
}

fetch() resolves in a response object which has methods for reading the body as text or JSON with .text() and .json() respectively. The resolving value for .text() is a string that does not have the method .json(). If you want to simply parse the body as a JSON use:

//This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.json();
        });
}

For anyone else encountering this problem:

I found that if I use a fetch call to return asynchronously via Zapier's "callback" method from inside an if statement, then I had to use "callback" to also return from all other control paths within the script, otherwise I would receive "ReferenceError: output is not defined theFunction". I don't know why this worked, but it did.

For example, something like this worked for me:

    //This does the Fetch:
function doFetch(urlAddress) {
    console.log("2. Doing Fetch");
    return fetch(urlAddress)
        .then(function(res) {
            return res.text();
        });
}

if (input.emailHasChanged == "true") 
{
    //Do Something
    console.log("1. Updating Email");
    doFetch(urlAddress)
        .then(function(response) {
            //Do something with Reponse.
            console.log("4. Doing Something: ", response);
            callback(null, response);
        });
}
else
{
    //Do Nothing
    console.log("1. Not Updating email");
    //output = {id: 2};
    //Use 'callback' instead of output
    callback(null, {id: 2});
}

本文标签： javascriptUsing fetch() in function results in quotoutput not definedquotStack Overflow