1

I am getting an error of TypeError: data.events is not iterable when using fetch to retrieve JSON data from an API.

I am pretty sure it is in my handling of the JSON in for (const event of data.events) from the below code but I am pulling short on finding a fix.

const data = fetch(url, {
    method: 'post',
    headers: new Headers({
        Authorization: 'Bearer ' + bearerToken,
       'Content-Type': 'application/json'
    })
});

for (const event of data.events) {
    let fileNode;
    try {
        fileNode = await createRemoteFileNode({
            url: logo.original.url,
            cache,
            store,
            createNode,
            createNodeId
         });
    } catch (error) {
        console.warn('error creating node', error);
    }
}

The JSON when requested in Postman is returned as

{
    "pagination": {
        ...
    },
    "events": [
        {
            "name": "Example One",
            "logo": {
                "original": {
                    "url": "exampleURL"
                }
            }
        },
        {
            "name": "Example Two",
            "logo": {
                "original": {
                   "url": "exampleURL"
                }
            }
        }
    ],
    "location": {
        ...
    }

}

The goal is to createRemoteFileNode for each event from logo.original.url

Darren
  • 2,176
  • 9
  • 42
  • 98
  • fetch is an async (promised) method so you should use `fetch(url...).then(data => data.json()).then(data => for (const event of data.events) {` – Mosh Feu May 26 '19 at 16:09
  • fetch returns a promise, there's no data.events at the time of you're trying to access it – baao May 26 '19 at 16:09
  • Quite a few questions like this one have been closed pointing to How to return the response from an asynchronous call - the question does ask for how to handle the reponse in a loop which is IMHO specific enought to give a specific answer especially with a few lines of example code. The generic answers (to a different related question) are IMHO far too complex in their structure - the full complexity of the implementation is exposed and explained to the reader while the question here is about the interface and the result not the inner workings. – Wolfgang Fahl Mar 28 '22 at 09:37

1 Answers1

2

fetch() returns a promise so data.events does not exist until the fetch promised is resolved. Edit your code this way:

fetch(url, {
    method: 'post',
    headers: new Headers({
        Authorization: 'Bearer ' + bearerToken,
       'Content-Type': 'application/json'
    })
}).then(function(data){

  for (const event of data.events) {
      let fileNode;
      try {
          fileNode = await createRemoteFileNode({
              url: logo.original.url,
              cache,
              store,
              createNode,
              createNodeId
           });
      } catch (error) {
          console.warn('error creating node', error);
      }
  }
});
Scott Flodin
  • 320
  • 1
  • 5