Leveraging the power of the fetch function within a JavaScript for loop

Question

Leveraging the power of the fetch function within a JavaScript for loop

As a beginner in JavaScript, I wrote some code to fetch URLs using the fetch API. However, I encountered an issue with my code where it says Functions declared within the loop are referencing an outer scoped variable. I understand that this is because of the outer scope of the obj variable, but I'm unsure how to fix it. Please assist me. Here's the code snippet:

var obj = [
  {"Id":"10101","descr":"server1.com"},
  {"Id":"10102","descr":"server2.com"},
  {"Id":"10103","descr":"server3.com"},
  {"Id":"10104","descr":"server4.com"},
  {"Id":"10105","descr":"server5.com"},
  {"Id":"10106","descr":"server6.com"}, 
  {"Id":"10107","descr":"server7.com"}
];

var temp = [];
for (var i = 0; i < obj.length; i++){      
  
  var id = obj[i].Id;      
  fetch('https://abced.com/api/'+id+'/value', {
    method : "GET",
    headers: { "Authorization": "xyz" }
  })
    .then(res => res.json())
    .then(data => { 
      var stats = data.status;          
      if (stats != "OK") {
        temp.push({ Id: obj[i].Id, descr: obj[i].descr, value:"ERROR" });
      }
      console.log(temp);
    })
    .catch(x => console.log("fail:", x))

}

The expected output should display as follows: (values of Id and descr will depend on the if statement in the code)

[{"Id": "10101","descr": "server1.com","status": "ERROR"},
{"Id": "10103","descr": "server3.com","status": "ERROR"},
{"Id": "10104","descr": "server4.com","status": "ERROR"}]

javascript fetch-api

Answer 1

Answer №1

Using the syntax of async...await is recommended as it is much more readable compared to using numerous .then() handlers.

In this scenario, a for .. of loop is utilized to go through each Id and descr value in the obj array, executing the relevant fetch() call for each one.

The result of each fetch call is awaited, followed by a status check. If the status is not 'OK', the information is added to the results array.

var obj = [
  {"Id":"10101","descr":"server1.com"},
  {"Id":"10102","descr":"server2.com"},
  {"Id":"10103","descr":"server3.com"},
  {"Id":"10104","descr":"server4.com"},
  {"Id":"10105","descr":"server5.com"},
  {"Id":"10106","descr":"server6.com"}, 
  {"Id":"10107","descr":"server7.com"}
];

async function getResults() {
    const results = [];
    for(let { Id, descr} of obj) {
        const data = await fetch('https://abced.com/api/' + Id + '/value', {
          method : "GET",
          headers: { "Authorization": "xyz" }
        }).then(res => res.json());
        if (data.status !== 'OK') {
            results.push({ Id, descr, value: 'ERROR' })
        }
    }
    return results;
}

async function test() { 
    const results = await getResults();
    console.log('Results:', results)
}

test();

The following code snippet demonstrates a mock of fetch, illustrating what you can expect.

For ids 10101, 10103, and 10104, fetchMock returns a status of 'BAD', while for all other ids it returns 'OK'.

// For testing only, replace with fetch when appropriate...
function fetchMock(url) {
    let id = url.split('/')[4];
    if ([10101, 10103, 10104].includes(+id)) {
        return Promise.resolve({ json() { return Promise.resolve({ status: 'BAD'})}})
    } else {
        return Promise.resolve({ json() { return Promise.resolve({ status: 'OK'})}})
    }
}

var obj = [
  {"Id":"10101","descr":"server1.com"},
  {"Id":"10102","descr":"server2.com"},
  {"Id":"10103","descr":"server3.com"},
  {"Id":"10104","descr":"server4.com"},
  {"Id":"10105","descr":"server5.com"},
  {"Id":"10106","descr":"server6.com"}, 
  {"Id":"10107","descr":"server7.com"}
];

async function getResults() {
    const results = [];
    for(let { Id, descr} of obj) {
        const data = await fetchMock('https://abced.com/api/' + Id + '/value', {
          method : "GET",
          headers: { "Authorization": "xyz" }
        }).then(res => res.json());
        if (data.status !== 'OK') {
            results.push({ Id, descr, value: 'ERROR' })
        }
    }
    return results;
}

async function test() { 
    const results = await getResults();
    console.log('Results:', results)
}

test()

.as-console-wrapper { max-height: 100% !important; }

Answer 2

Using the syntax of async...await is recommended as it is much more readable compared to using numerous .then() handlers.

In this scenario, a for .. of loop is utilized to go through each Id and descr value in the obj array, executing the relevant fetch() call for each one.

The result of each fetch call is awaited, followed by a status check. If the status is not 'OK', the information is added to the results array.

var obj = [
  {"Id":"10101","descr":"server1.com"},
  {"Id":"10102","descr":"server2.com"},
  {"Id":"10103","descr":"server3.com"},
  {"Id":"10104","descr":"server4.com"},
  {"Id":"10105","descr":"server5.com"},
  {"Id":"10106","descr":"server6.com"}, 
  {"Id":"10107","descr":"server7.com"}
];

async function getResults() {
    const results = [];
    for(let { Id, descr} of obj) {
        const data = await fetch('https://abced.com/api/' + Id + '/value', {
          method : "GET",
          headers: { "Authorization": "xyz" }
        }).then(res => res.json());
        if (data.status !== 'OK') {
            results.push({ Id, descr, value: 'ERROR' })
        }
    }
    return results;
}

async function test() { 
    const results = await getResults();
    console.log('Results:', results)
}

test();

The following code snippet demonstrates a mock of fetch, illustrating what you can expect.

For ids 10101, 10103, and 10104, fetchMock returns a status of 'BAD', while for all other ids it returns 'OK'.

// For testing only, replace with fetch when appropriate...
function fetchMock(url) {
    let id = url.split('/')[4];
    if ([10101, 10103, 10104].includes(+id)) {
        return Promise.resolve({ json() { return Promise.resolve({ status: 'BAD'})}})
    } else {
        return Promise.resolve({ json() { return Promise.resolve({ status: 'OK'})}})
    }
}

var obj = [
  {"Id":"10101","descr":"server1.com"},
  {"Id":"10102","descr":"server2.com"},
  {"Id":"10103","descr":"server3.com"},
  {"Id":"10104","descr":"server4.com"},
  {"Id":"10105","descr":"server5.com"},
  {"Id":"10106","descr":"server6.com"}, 
  {"Id":"10107","descr":"server7.com"}
];

async function getResults() {
    const results = [];
    for(let { Id, descr} of obj) {
        const data = await fetchMock('https://abced.com/api/' + Id + '/value', {
          method : "GET",
          headers: { "Authorization": "xyz" }
        }).then(res => res.json());
        if (data.status !== 'OK') {
            results.push({ Id, descr, value: 'ERROR' })
        }
    }
    return results;
}

async function test() { 
    const results = await getResults();
    console.log('Results:', results)
}

test()

.as-console-wrapper { max-height: 100% !important; }

Leveraging the power of the fetch function within a JavaScript for loop

Answer №1

Similar questions

Transforming control of execution seamlessly between two interactive functions in nodejs

Scrolling the inner div with the main scrollbar before navigating through the rest of the page

Is there an issue with this particular jQuery if condition?

Replace particular letters within the text with designated spans

Issue with HTML5 Video Play on Hover Functionality Ceases to Work Upon Loading Dynamic Content

Sending data with React using POST request

Maintain original pitch of HTML video content (preservesPitch, mozPreservesPitch, webkitPreservesPitch)

Controlled Checkbox Component in React

Update the chosen option in a dropdown list with jQuery and javascript

Timing of JQuery FadeOut is incorrect

Communication between Nodemailer and Mailgun

Adjust the date and time from an XML file to the local date and time using JavaScript or JQuery

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

Leveraging the capabilities of the Freshdesk API

Adding a Sequence of Class Names to <li> Elements with JavaScript

Solution for unresolvable Ajax token error

Is it possible to rotate the caret in the dropdown 180 degrees using only CSS?

Update an array of objects by incorporating additional properties from another array, even if the two arrays are of different lengths. When the iteration of the array is complete, it should

The component is unable to access VueJS references

Refreshing the page reveals the complete local storage object