1

I am trying to return an object based on data coming from GET request. I can print the whole object using console.log but can't return the full object.

Please see my code below:

fetch('https://api-nile.tfl.gov.uk/AirQuality')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    buildObjectDynamically(data);
  });

function buildObjectDynamically(data) {
  let airQualityObj = [];
  for (let i of data.currentForecast) {
    let eachEntry = {
      id: i.$id,
      forecastBand: i.forecastBand,
      forecastType: i.forecastType,
    };
    airQualityObj.push(eachEntry);
  }
  console.log(airQualityObj);
  return airQualityObj; // This line is not returning my object.
}

If I hardcode the data and leave outside the fetchAPI then it works as expected. Please see example below:

function buildStaticObject() {
  return {
    airQualityObj: [{
        id: '2',
        forecastType: 'Current',
        forecastBand: 'Low',
      },
      {
        id: '3',
        forecastType: 'Future',
        forecastBand: 'Low',
      }
    ]
  }
}

buildStaticObject();

Please note that I can actually return the response from the API. What I am struggling with is how to return the newly build object from that response.

Thanks

John
  • 627
  • 6
  • 19
  • @Evert I can actually return the response from the fetchAPI(promise based). What I am trying to do is build an object and return that. – John Oct 22 '19 at 18:22
  • just need 1 more return .then(function(data) { return buildObjectDynamically(data); }); – Kyle Oct 22 '19 at 18:25
  • @Kyle your suggestion is throwing an error. `Cannot read property 'currentForecast' of undefined` – John Oct 22 '19 at 18:29
  • https://jsfiddle.net/3zadnq9g/ - the data returns a promise that when it's done will give the data in the ".then" function – Kyle Oct 22 '19 at 18:36
  • Hi @Kyle I want to `return` the object instead of writing on DOM. Something like this `data.then(function(res){return res;})`. Please see my last code snippet in the original question. – John Oct 22 '19 at 19:21
  • I think I'm missing something. The value that I'm setting in the DOM in the example is the response - the response is asyn so it doesn't come strait back, you need a function to fire off when the response is ready. that function is the .then(..). I just wrote it to a DOM node so you could see the results. Instead of setting the value to a DOM element you'd pass it along to whomever needs it. – Kyle Oct 22 '19 at 20:04
  • Hi @Kyle If you execute my hardcoded solution -> `https://jsfiddle.net/xqp6nc21/` in your console you will see the object being returned. However, ff you execute your solution -> https://jsfiddle.net/hzbvdn5f/ it stays on `pending` and doesn't return the object. Does this makes sense? – John Oct 22 '19 at 20:09
  • yes it makes sense. With your hardcoded solution the results 'exist' immediately and can therefore be returned instantly. When you use fetch (asyn function) the data has to be retrieved, so the data does not exist immediately like your hardcoded solution. Since the data needs to be retrieved you cannot ask it to immediately return it. The best you can do is asked to be notified when the data is ready (like in my fiddle). Make sense? – Kyle Oct 23 '19 at 11:59

0 Answers0