Create an order for JSON to be loaded

Question

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?

try this may give you some idea. https://stackoverflow.com/questions/33073509/promise-all-then-resolve — jsduniya, Aug 12 '19 at 10:32

score 1 · Accepted Answer · answered Aug 12 '19 at 10:43

1

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.

answered Aug 12 '19 at 10:43

Rory McCrossan

331,213
40
305
339

requests are asynchronous, so it doesn't lock the browser – Guerric P Aug 12 '19 at 10:45
I'm not sure I see your point. I've stated that in the above, as it's the reason for the behaviour the OP is seeing – Rory McCrossan Aug 12 '19 at 10:46
Maybe I misunderstood what you mean by "lock"? An active request won't prevent a user from interacting with the web page – Guerric P Aug 12 '19 at 10:47
1

That statement is with regard to synchronous requests – Rory McCrossan Aug 12 '19 at 10:47
1

@Twistingnether there are synchronous XmlHttpRequests, however they are both deprecated and not recommended (and never were). It's a good sign that you don't know about them ... ;) – Jonas Wilms Aug 12 '19 at 11:09

score 0 · Answer 2 · answered Aug 12 '19 at 10:33

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
}

score 0 · Answer 3 · answered Aug 12 '19 at 10:34

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);
}

Guerric P · Answer 4 · 2019-08-12T10:48:50.597

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);
  //...
}

Create an order for JSON to be loaded

4 Answers4