Fetch returns undefined when imported












3















I have a function that fetches data from the url and is supposed to return it:



const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
return data;
})
}

export default fetchTableData;


The problem is that when i import this function and try to use it, it always returns undefined.



When i console log the data inside the function itself, you can see it is available. The function just doesn't work when i try to import it.



What is the problem here? Why does it work that way?










share|improve this question























  • You should add the code where you implemented it

    – Just code
    Nov 21 '18 at 12:36
















3















I have a function that fetches data from the url and is supposed to return it:



const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
return data;
})
}

export default fetchTableData;


The problem is that when i import this function and try to use it, it always returns undefined.



When i console log the data inside the function itself, you can see it is available. The function just doesn't work when i try to import it.



What is the problem here? Why does it work that way?










share|improve this question























  • You should add the code where you implemented it

    – Just code
    Nov 21 '18 at 12:36














3












3








3








I have a function that fetches data from the url and is supposed to return it:



const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
return data;
})
}

export default fetchTableData;


The problem is that when i import this function and try to use it, it always returns undefined.



When i console log the data inside the function itself, you can see it is available. The function just doesn't work when i try to import it.



What is the problem here? Why does it work that way?










share|improve this question














I have a function that fetches data from the url and is supposed to return it:



const fetchTableData = () => {
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
return data;
})
}

export default fetchTableData;


The problem is that when i import this function and try to use it, it always returns undefined.



When i console log the data inside the function itself, you can see it is available. The function just doesn't work when i try to import it.



What is the problem here? Why does it work that way?







javascript reactjs ecmascript-6 fetch-api






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 '18 at 12:31









SkyphoSkypho

21818




21818













  • You should add the code where you implemented it

    – Just code
    Nov 21 '18 at 12:36



















  • You should add the code where you implemented it

    – Just code
    Nov 21 '18 at 12:36

















You should add the code where you implemented it

– Just code
Nov 21 '18 at 12:36





You should add the code where you implemented it

– Just code
Nov 21 '18 at 12:36












3 Answers
3






active

oldest

votes


















5














Try this =) You have to return something from the fetchTableData function also.



const fetchTableData = () => {
const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
return data;
})

return fetchedData;
}

export default fetchTableData;


Or you can just return it like this:



const fetchTableData = () => {
return fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
return data;
})
}

export default fetchTableData;





share|improve this answer


























  • Wonderful, works like a charm. Thanks! May you please add a reminder that this way fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.

    – Skypho
    Nov 21 '18 at 12:58





















3














You need to either store data in a global variable or assign any variable to fetch to get return data.






//First way
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
console.log("data",data);
});

//Second way
let binData = null;

fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(data => {
binData = data;
console.log("binData", binData);
});





Here is the working example.






share|improve this answer































    1














    In your code you were not returning from the fetchTableData function. Only from the the second then() callback. When a function has no return value, undefined will be returned.



    Try this instead:



    const fetchTableData = () => {
    const myResponse = fetch('https://api.myjson.com/bins/15psn9')
    .then(result => result.json())
    .then(data => {
    return data;
    })
    return myResponse;
    }

    export default fetchTableData;


    What now happens is the following:




    1. The response return by the second then() function is returning the data.

    2. We are saving this data in a variable, named myResponse.

    3. We are now returning this value from the function fetchTableData.






    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412109%2ffetch-returns-undefined-when-imported%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      5














      Try this =) You have to return something from the fetchTableData function also.



      const fetchTableData = () => {
      const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })

      return fetchedData;
      }

      export default fetchTableData;


      Or you can just return it like this:



      const fetchTableData = () => {
      return fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })
      }

      export default fetchTableData;





      share|improve this answer


























      • Wonderful, works like a charm. Thanks! May you please add a reminder that this way fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.

        – Skypho
        Nov 21 '18 at 12:58


















      5














      Try this =) You have to return something from the fetchTableData function also.



      const fetchTableData = () => {
      const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })

      return fetchedData;
      }

      export default fetchTableData;


      Or you can just return it like this:



      const fetchTableData = () => {
      return fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })
      }

      export default fetchTableData;





      share|improve this answer


























      • Wonderful, works like a charm. Thanks! May you please add a reminder that this way fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.

        – Skypho
        Nov 21 '18 at 12:58
















      5












      5








      5







      Try this =) You have to return something from the fetchTableData function also.



      const fetchTableData = () => {
      const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })

      return fetchedData;
      }

      export default fetchTableData;


      Or you can just return it like this:



      const fetchTableData = () => {
      return fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })
      }

      export default fetchTableData;





      share|improve this answer















      Try this =) You have to return something from the fetchTableData function also.



      const fetchTableData = () => {
      const fetchedData = fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })

      return fetchedData;
      }

      export default fetchTableData;


      Or you can just return it like this:



      const fetchTableData = () => {
      return fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      return data;
      })
      }

      export default fetchTableData;






      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Nov 21 '18 at 12:41

























      answered Nov 21 '18 at 12:35









      weibenfalkweibenfalk

      53617




      53617













      • Wonderful, works like a charm. Thanks! May you please add a reminder that this way fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.

        – Skypho
        Nov 21 '18 at 12:58





















      • Wonderful, works like a charm. Thanks! May you please add a reminder that this way fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.

        – Skypho
        Nov 21 '18 at 12:58



















      Wonderful, works like a charm. Thanks! May you please add a reminder that this way fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.

      – Skypho
      Nov 21 '18 at 12:58







      Wonderful, works like a charm. Thanks! May you please add a reminder that this way fetchTableData() returns a Promise and its data needs to accessed using another then? It would save couple of minutes for other newbies like me, that come around this question.

      – Skypho
      Nov 21 '18 at 12:58















      3














      You need to either store data in a global variable or assign any variable to fetch to get return data.






      //First way
      fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      console.log("data",data);
      });

      //Second way
      let binData = null;

      fetch('https://api.myjson.com/bins/15psn9')
      .then(result => result.json())
      .then(data => {
      binData = data;
      console.log("binData", binData);
      });





      Here is the working example.






      share|improve this answer




























        3














        You need to either store data in a global variable or assign any variable to fetch to get return data.






        //First way
        fetch('https://api.myjson.com/bins/15psn9')
        .then(result => result.json())
        .then(data => {
        console.log("data",data);
        });

        //Second way
        let binData = null;

        fetch('https://api.myjson.com/bins/15psn9')
        .then(result => result.json())
        .then(data => {
        binData = data;
        console.log("binData", binData);
        });





        Here is the working example.






        share|improve this answer


























          3












          3








          3







          You need to either store data in a global variable or assign any variable to fetch to get return data.






          //First way
          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          console.log("data",data);
          });

          //Second way
          let binData = null;

          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          binData = data;
          console.log("binData", binData);
          });





          Here is the working example.






          share|improve this answer













          You need to either store data in a global variable or assign any variable to fetch to get return data.






          //First way
          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          console.log("data",data);
          });

          //Second way
          let binData = null;

          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          binData = data;
          console.log("binData", binData);
          });





          Here is the working example.






          //First way
          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          console.log("data",data);
          });

          //Second way
          let binData = null;

          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          binData = data;
          console.log("binData", binData);
          });





          //First way
          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          console.log("data",data);
          });

          //Second way
          let binData = null;

          fetch('https://api.myjson.com/bins/15psn9')
          .then(result => result.json())
          .then(data => {
          binData = data;
          console.log("binData", binData);
          });






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 21 '18 at 12:37









          varit05varit05

          1,630715




          1,630715























              1














              In your code you were not returning from the fetchTableData function. Only from the the second then() callback. When a function has no return value, undefined will be returned.



              Try this instead:



              const fetchTableData = () => {
              const myResponse = fetch('https://api.myjson.com/bins/15psn9')
              .then(result => result.json())
              .then(data => {
              return data;
              })
              return myResponse;
              }

              export default fetchTableData;


              What now happens is the following:




              1. The response return by the second then() function is returning the data.

              2. We are saving this data in a variable, named myResponse.

              3. We are now returning this value from the function fetchTableData.






              share|improve this answer




























                1














                In your code you were not returning from the fetchTableData function. Only from the the second then() callback. When a function has no return value, undefined will be returned.



                Try this instead:



                const fetchTableData = () => {
                const myResponse = fetch('https://api.myjson.com/bins/15psn9')
                .then(result => result.json())
                .then(data => {
                return data;
                })
                return myResponse;
                }

                export default fetchTableData;


                What now happens is the following:




                1. The response return by the second then() function is returning the data.

                2. We are saving this data in a variable, named myResponse.

                3. We are now returning this value from the function fetchTableData.






                share|improve this answer


























                  1












                  1








                  1







                  In your code you were not returning from the fetchTableData function. Only from the the second then() callback. When a function has no return value, undefined will be returned.



                  Try this instead:



                  const fetchTableData = () => {
                  const myResponse = fetch('https://api.myjson.com/bins/15psn9')
                  .then(result => result.json())
                  .then(data => {
                  return data;
                  })
                  return myResponse;
                  }

                  export default fetchTableData;


                  What now happens is the following:




                  1. The response return by the second then() function is returning the data.

                  2. We are saving this data in a variable, named myResponse.

                  3. We are now returning this value from the function fetchTableData.






                  share|improve this answer













                  In your code you were not returning from the fetchTableData function. Only from the the second then() callback. When a function has no return value, undefined will be returned.



                  Try this instead:



                  const fetchTableData = () => {
                  const myResponse = fetch('https://api.myjson.com/bins/15psn9')
                  .then(result => result.json())
                  .then(data => {
                  return data;
                  })
                  return myResponse;
                  }

                  export default fetchTableData;


                  What now happens is the following:




                  1. The response return by the second then() function is returning the data.

                  2. We are saving this data in a variable, named myResponse.

                  3. We are now returning this value from the function fetchTableData.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 21 '18 at 13:05









                  Willem van der VeenWillem van der Veen

                  4,53032027




                  4,53032027






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412109%2ffetch-returns-undefined-when-imported%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

                      Alcedinidae

                      RAC Tourist Trophy