Utilize a for loop to load data using JSON

Question

Utilize a for loop to load data using JSON

Here's a question for you. Take a look at my code snippet:

var data=[];
for(i=0;i<parametrTable.length;++i){
    x = parametrTable[i];
    (function(i) {
        if(i==0){
            $.getJSON("myurlwithparametr", function(json) {
                $.each(json, function(j, d){
                    data.push({"column0": d.column, "count0": d.count});
                 });
             });
         }
         else{
              $.getJSON("myurlwithparametr", function(json) {
                $.each(json, function(j, d){
                    data[j]["count"+i] = d.count});
              });
         }
         })(i);
   }

The 'data' array is being filled with individual values fetched from JSON responses. I suspect the issue lies in the asynchronous nature of the variable 'i' within the loop. Any thoughts on how to tackle this challenge?

javascript json for-loop

Answer 1

Answer №1

Ensuring the initial JSON is loaded and processed before handling others in any order.

var data = [];
x = parametrTable[0];
$.getJSON("myurlwithparametr", function(json) { ... get first data
    $.each(json, function(j, d) { // ... process first data
        data.push({
            "column0": d.column,
            "count0": d.count
        });
    });
    $.each(parametrTable, function(i, x) { // NOTE: x is now populated here
        if (i) { // run from 1 ... end after 1st JSON is done
            $.getJSON("myurlwithparametr", function(json) {
                $.each(json, function(j, d) {
                    data[j]["count" + i] = d.count;
                });
            });
        }
    });
});

Consider this alternative for a cleaner approach:

var data = [];
$.each(parametrTable, function(i, x) { // NOTE: x = parametrTable[i]
    $.getJSON("myurlwithparametr", function(json) {
        $.each(json, function(j, d) {
            data[j] = data[j] || {};
            data[j]["count" + i] = d.count;
            if (i == 0) {
                data[j].column0 = d.column;
            }
        });
    });
});

Answer 2

Ensuring the initial JSON is loaded and processed before handling others in any order.

var data = [];
x = parametrTable[0];
$.getJSON("myurlwithparametr", function(json) { ... get first data
    $.each(json, function(j, d) { // ... process first data
        data.push({
            "column0": d.column,
            "count0": d.count
        });
    });
    $.each(parametrTable, function(i, x) { // NOTE: x is now populated here
        if (i) { // run from 1 ... end after 1st JSON is done
            $.getJSON("myurlwithparametr", function(json) {
                $.each(json, function(j, d) {
                    data[j]["count" + i] = d.count;
                });
            });
        }
    });
});

Consider this alternative for a cleaner approach:

var data = [];
$.each(parametrTable, function(i, x) { // NOTE: x = parametrTable[i]
    $.getJSON("myurlwithparametr", function(json) {
        $.each(json, function(j, d) {
            data[j] = data[j] || {};
            data[j]["count" + i] = d.count;
            if (i == 0) {
                data[j].column0 = d.column;
            }
        });
    });
});

Answer 3

Answer №2

This code snippet is designed to meet your requirements.

let newData = [];
parameterList.forEach((item, index) => {
    if(index === 0) {
        $.getJSON("/url/with/params?params", (json) => {
            $.each(json, (j, d) => {
                newData.push({"columnZero": d.column, "countZero": d.count});
             });
         });
     } else {
          $.getJSON("myUrlWithParameter", (json) => {
            $.each(json, (j, d) => {
                newData[j]["count"+index] = d.count
            });
        });
    }
});

Answer 4

This code snippet is designed to meet your requirements.

let newData = [];
parameterList.forEach((item, index) => {
    if(index === 0) {
        $.getJSON("/url/with/params?params", (json) => {
            $.each(json, (j, d) => {
                newData.push({"columnZero": d.column, "countZero": d.count});
             });
         });
     } else {
          $.getJSON("myUrlWithParameter", (json) => {
            $.each(json, (j, d) => {
                newData[j]["count"+index] = d.count
            });
        });
    }
});

Answer 5

Answer №3

Ensure that the calls are made in a sequential order, meaning the next call will not begin until the previous one has finished. It may be necessary to verify when each call is completed within your other code.

let dataArray = [];
fetchDataParameter(dataArray, parameterList, 0); 
function fetchDataParameter(dataArray, parameterList, index){
  const parameter = parameterList[index];
  const url = "myurlwithparameter";
  $.getJSON(url, function(json) {
    if(index === 0){  
      $.each(json, function(j, d) {dataArray.push({"column0": d.column, "count0": d.count});});
    } else {
      $.each(json, function(j, d) {dataArray[j]["count"+index] = d.count;});
    }
    if(++index < parameterList.length){
      fetchDataParameter(dataArray, parameterList, index);
    }
  });
}

Answer 6

Ensure that the calls are made in a sequential order, meaning the next call will not begin until the previous one has finished. It may be necessary to verify when each call is completed within your other code.

let dataArray = [];
fetchDataParameter(dataArray, parameterList, 0); 
function fetchDataParameter(dataArray, parameterList, index){
  const parameter = parameterList[index];
  const url = "myurlwithparameter";
  $.getJSON(url, function(json) {
    if(index === 0){  
      $.each(json, function(j, d) {dataArray.push({"column0": d.column, "count0": d.count});});
    } else {
      $.each(json, function(j, d) {dataArray[j]["count"+index] = d.count;});
    }
    if(++index < parameterList.length){
      fetchDataParameter(dataArray, parameterList, index);
    }
  });
}

Utilize a for loop to load data using JSON

Answer №1

Answer №2

Answer №3

Similar questions

Learn how to use Cocos2d 2.1.4 to load text, strings, and JSON in HTML

What could be the reason for the GET method being executed after the DELETE method in ExpressJS?

Uploading files using Multipart/form-data in Node.js and Express.js

the sequence in which a node executes a javascript function

Using Golang to Decode mapset

Displaying a set through an express server cookie for the client to see

Manually browse through images in photoswipe by clicking on them to move to the previous or next ones

When I try to import script files into my ASP.NET page, Intellisense displays the methods accurately. However, when I attempt to call one of them, an

The specified method is not recognized as a function in the ReactJS library

What steps do I need to take in order to generate a legitimate link annotation within Adobe Acrobat by utilizing Acrobat

Navigate to the same destination with React Router Dom while passing state as a parameter

Convert JSON data into any desired object

Is there a way to randomly change the colors of divs for a variable amount of time?

Incorporate Functionality into AngularJS Controller

Transition one background image into another using background positioning

Public directory assets not accessible

Changing the active state of an icon when clicked in a list generated by v-for in Vue

Guide to sequentially playing multiple video objects with buffering

My AJAX checkbox change event is not functioning, what could be causing this issue?

Guide on converting this function into a computed property within Vue