Import several JSON files

Question

Import several JSON files

var address = [ "data/somedata1.json", "data/somedata2.json", "data/somedata3.json", "data/somedata4.json", "data/somedata5.json"];

There is also a function available to import these files:

function readData()
{
    var loadFile = function (filePath, done)
    {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", filePath, true);
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.onload = function () { return done(this.responseText) }
        xhr.send();
    }
    
    address.forEach(function (file, i)
        {
            loadFile(file, function (responseText)
            {
                jsonData[i] = JSON.parse(responseText);
                if(i === 4)
                {
                    fill(jsonData);
                    document.getElementById("el").innerHTML = jsonData[2].title3;
                    Dosomething(jsonData[0])
                }
            })
        })

}

All the JSON files have an exact size of 150kb. However, there seems to be an issue where sometimes when running this code on a website, jsonData[0] turns out to be undefined. This inconsistency in loading data raises the question of what might be going wrong. Is there a way to optimize this code for better assurance that all files are loaded correctly?

javascript arrays json

Answer 1

Answer №1

One particular concern is that even for relatively small files, there is no guarantee that the downloads will finish in sequential order. To address this issue, it would be more effective to maintain a separate variable to keep track of the number of completed downloads:

function retrieveData() {
  var fetchFile = function(filePath, done) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", filePath, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.onload = function() { return done(this.responseText) }
    xhr.send();
  }
  var completeCount = 0;
  fileList.forEach(function(file, i) {
    fetchFile(file, function(responseText) {
      jsonData[i] = JSON.parse(responseText);
      completeCount++;
      if(completeCount === fileList.length) {
        populate(jsonData[4]);
        document.getElementById("el").innerHTML = jsonData[2].title3;
        DoSomething(jsonData[0])
      }
    });
  })
}

Answer 2

One particular concern is that even for relatively small files, there is no guarantee that the downloads will finish in sequential order. To address this issue, it would be more effective to maintain a separate variable to keep track of the number of completed downloads:

function retrieveData() {
  var fetchFile = function(filePath, done) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", filePath, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.onload = function() { return done(this.responseText) }
    xhr.send();
  }
  var completeCount = 0;
  fileList.forEach(function(file, i) {
    fetchFile(file, function(responseText) {
      jsonData[i] = JSON.parse(responseText);
      completeCount++;
      if(completeCount === fileList.length) {
        populate(jsonData[4]);
        document.getElementById("el").innerHTML = jsonData[2].title3;
        DoSomething(jsonData[0])
      }
    });
  })
}

Import several JSON files

Answer №1

Similar questions

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Choosing an item in an AngularJS select directive from an external origin

What is the best way to send multiple parameter values from jQuery to a Laravel controller?

After I click on an operator button, the display on my HTML calculator does not reset

Updating model values while dragging with Angular Dragular

Is there a way to transform a PNG image binary string into base64 encoding without saving it to disk?

How to utilize Vue method for accessing DOM elements

Display a default value if the state's value is not defined | Vue.js 3

having trouble parsing JSON data

Using jQuery to convert JSON data into an array

Transmitting information through ajax and fetching it using Request.Form[""]

Analyzing Varied Date Formats

What is preventing me from retrieving the coordinates from the marker in the Google Maps Places API?

Tips for transferring data from a service to a method within a component

Adjust the width of the graphics on both sides of the text based on the length of the text content

A step-by-step guide on adding multiple rows in Laravel

When utilizing JSON tag, an empty array [] is returned, which conflicts with gson's expectation

Troubleshooting: Missing JQuery Header in Table

Ant Design - Select - Automatically close dropdown when no data is available

At times, Firefox may fail to fully showcase an image in fullscreen mode