Fetch: Help needed on passing the response data to another function

Created on 5 Nov 2016  路  5Comments  路  Source: github/fetch

I am using fetch library as follows...
file.js

import {getdata} from 'api.js';

var a = getdata(payload);
console.log(a);

api.js

exports.getdata = (data) => {
   fetch(url)
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json);
    return json;
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })
};

variable a is undefined even though json value exists and it is logged before the parsed json logging. i am a reactjs newbie and couldn't figure how to tackle this issue. I am guessing issue is related with asynchronous loading. What am i doing wrong here???

Most helpful comment

What @dgraham meant is that you are missing a return statement:

exports.getdata = (data) => {
   return fetch(url)...
// ^^^ this return statement right here

Previously, your getdata function didn't have a return statement. Any JavaScript function without a return statement will always return undefined, no matter what happens within it.

Also, your caller of the getdata function should be rewritten like this if you want to actually see the JSON data:

var a = getdata(payload)
a.then((result) => console.log(result))

Remember that anything that returns a Promise, like fetch, you need to always append then(...) to it.

I wish you good luck with your JavaScript learning process, but note that this is not a place to ask usage questions whenever you get stuck! Issues for specific projects like this one are for reporting bugs only. You should ask general React or JavaScript question on appropriate forums and Stack Overflow. Thanks!

All 5 comments

This is just missing a return statement inside getdata.

@dgraham but i am returning json .

What @dgraham meant is that you are missing a return statement:

exports.getdata = (data) => {
   return fetch(url)...
// ^^^ this return statement right here

Previously, your getdata function didn't have a return statement. Any JavaScript function without a return statement will always return undefined, no matter what happens within it.

Also, your caller of the getdata function should be rewritten like this if you want to actually see the JSON data:

var a = getdata(payload)
a.then((result) => console.log(result))

Remember that anything that returns a Promise, like fetch, you need to always append then(...) to it.

I wish you good luck with your JavaScript learning process, but note that this is not a place to ask usage questions whenever you get stuck! Issues for specific projects like this one are for reporting bugs only. You should ask general React or JavaScript question on appropriate forums and Stack Overflow. Thanks!

Thanks a ton @mislav . You just saved my day. Was stuck on this for quiet a long time. @dgraham thanks a lot. Its just that i was too dumb not to understand what you meant. Thanks for pointing out the other informations too. Will keep that in mind from now on.

hello can some one help me to passes data from fetch api response to another page ?

$(document).on('click', '#edit-property', function () {
        var data = $(this).data('info');
        fetch('/property/'+data)
            .then(response => {
            if (response.ok) {
                response.json().then(property => {
                    console.log(property);
                    window.location.href="/property-details";

                })
            } else {
                console.error(' Reponse serveur : ' + response.status);
            }

        });
    });
Was this page helpful?
0 / 5 - 0 ratings