I want the function that fetches data to return a certain value

Question

I am trying to return the data fetched by the function getData() and use the returned value (return this.getStreamer(values[0],values[1]);) to render the StreamerContainerResult component.

However, it keeps returning "undefined" and as a result, I cant render anything..

I am stuck on this bug for the past few hours and I cant figure it out on my own.

 getData(value, type) {
    let streamerData = [];

    let urls = ['https://wind-bow.gomix.me/twitch-api/streams/' + value, 'https://wind-bow.gomix.me/twitch-api/users/' + value];

    const getJson = url => fetch(url).then(res => res.json());
    Promise.all(urls.map(getJson))
           .then((values) => {
             if (type === "search") {
               this.setState({
                 streamer: values
               });
               console.log("searching");
             } else {
               console.log("displaying");
               return this.getStreamer(values[0],values[1]);
             }
          }).catch(err => {
            console.log('Something went wrong...')
          });
}

https://codepen.io/brood915/pen/OWQpmy?editors=0110

score 0 · Answer 1 · answered Feb 14 '17 at 22:24

You are trying to return data from within an asyncronous callback function. As a result, the information wont be accessible. See below for an updated snippet with a callback done function and reference to this. Cheers.

//Notice I added a done callback for when our asyncronous function is finished
function getData(value, type, done) {
  //Added a variable that points to this (to have scope to our other functions)
  var self = this;

  let streamerData = [];

  let urls = ['https://wind-bow.gomix.me/twitch-api/streams/' + value, 'https://wind-bow.gomix.me/twitch-api/users/' + value];

  const getJson = url => fetch(url).then(res => res.json());

  //Due to the asyncronous nature of a promise, you cannot return information via a return. See below... 
  Promise.all(urls.map(getJson))
    .then((values) => {
      if (type === "search") {
        self.setState({
          streamer: values
        });
        console.log("searching");
      } else {
        console.log("displaying");

        //This return is the return for the function, it won't return the data
        // return self.getStreamer(values[0], values[1]);
        //Return by passing the data to the callback
        done(self.getStreamer(values[0], values[1]));
      }
    }).catch(err => {
      console.log('Something went wrong...')
    });
};

//Calling our function above.
getData("<value>", "<type>", function(streamer) {
  console.log(streamer); //This should contain the information you need.
})

Here is some good reading on how to work with callbacks.

Thank you. I successfully accessed the elements returned by the function. However, for some reason, it still doesnt get rendered by the component.. Why is this? — brood915, Feb 15 '17 at 13:41
You're using reactJS eh? I don't know much about it.. but maybe this [question](http://stackoverflow.com/questions/24185029/reactjs-async-wait-for-results) will help. Cheers. — matt, Feb 15 '17 at 14:41

I want the function that fetches data to return a certain value

1 Answers1