CODEWITHSUNDEEP
javascriptjqueryjsonfunctiongetjson
nb_nb_nb
nb_nb_nb

Reputation: 1381

Create an order for JSON to be loaded

I have multiple external JSON files that need to be loaded on my page. Is there a way to set an order for them to be loaded.

JavaScript

const func1 = () => {
    $.getJSON(json1, result => {});
    $.getJSON(json2, result => {});
}
...
    const func2 = () => {
    $.getJSON(json3, result => {});
    $.getJSON(json4, result => {});
}

Right now I have 4 different getJSON and now as I can see, this is the loading order = json1=>json3=>json4=>json2.

Is there a way to set an order on when to load the json files. I want to load it json1=>json2=>json3=>json4?

Upvotes: 0

Views: 77

Answers (4)

Guerric P
Guerric P

Reputation: 31825

All of your requests are done simultaneously, thus, the order you observe is related to the reponse time of your backend.

If you absolutely want to wait for a request before the next one starts, then just chain them like that:

$.getJSON(json1, result => {
  $.getJSON(json2, result => {
    $.getJSON(json3, result => {
      $.getJSON(json4, result => {})
    })
  })
})

And if you want to avoid indentation :

const func1 = async () => {
  const result1 = await $.getJSON(json1);
  const result2 = await $.getJSON(json2);
  const result3 = await $.getJSON(json3);
  //...
}

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337656

The issue you're seeing is because the requests are all asynchronous. As such you are entirely at the mercy of the network between the client's machine and the receiving server, as well as the load the server is under at that given moment and how strenuous each task you're asking to be done is, as to which of those requests are received and responded to first.

There are ways to mitigate this in your client-side logic, such as request chaining or synchronous requests, however the former has a negative effect of UI performance and the latter is terrible practice as it locks the browser until all requests complete.

The best approach to take if you need to rely on the order of the response, is to instead aggregate all of these requests in to a single one and send that alone. Your client-side logic can then continue processing as it has access to all the data you require. This will also scale much better in terms of server performance. It may require some changes to your server side logic, however, but this is a small price for both better client-side logic and server-side performance.

Upvotes: 1

MauriceNino
MauriceNino

Reputation: 6757

While theoretically possible, it is not advised.

I would rather make one request out of those 4 and handle that one request, or send all 4 asynchronously and continue work, when all 4 resolved.

Here would be the simple solution to send them one after another:

$.getJSON(json1, result => {
    $.getJSON(json2, result => {
        $.getJSON(json3, result => {
            $.getJSON(json4, result => {});
        });
    });
});

Here would be a solution, to write it with promises and async/await (Its a bit cleaner):

function sendJsonRequest(jsonData) {
    return new Promise(resolve => {
        $.getJSON(jsonData, result => resolve(result));
    });
}

async function getData() {
    let data1 = await sendJsonRequest(json1);
    let data2 = await sendJsonRequest(json2);
    let data3 = await sendJsonRequest(json3);
    let data4 = await sendJsonRequest(json4);
}

Upvotes: 0

nikksan
nikksan

Reputation: 3481

You can queue them. Initiate new api call once previous has succeeded.

const jsonData = [];

$.getJSON(json1, result => {
  jsonData.push(result);
  $.getJSON(json2, result => {
    jsonData.push(result);
    $.getJSON(json3, result => {
      jsonData.push(result);
      $.getJSON(json4, result => {
        jsonData.push(result);
        processJsonData(jsonData);
      });
    })
  })
})

function processJsonData(jsonData) {
  const [
    json1,
    json2,
    json3,
    json4
  ] = jsonData;

  // Further proccessing
}

Upvotes: 0

Related Questions