How can I retrieve multiple JSON files using JavaScript?

Question

I have a web application that receives json from a server. I was using this code:

var http_request = new XMLHttpRequest();
var url = "url where I have the json"
http_request.onreadystatechange = handle_json;
http_request.open("GET", url, true);
http_request.send(null);
var obj;

function handle_json() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
     var json_data = http_request.responseText; 
     obj = eval("(" + json_data + ")");
     processData(obj);

} else {
  alert("A problem ocurred");
}
http_request = null;

} }

But now I want to receive json from two url's and show the information. How can I do this using JavaScript? I know eval is not the appropiate thing to do but this is just a prototype.

Thank you so much! :)

Fyi, you should use JSON.parse() instead of eval() to parse JSON. Is using jQuery an option? It would turn your code pretty much into a one-liner. — ThiefMaster
– ThiefMaster, Commented May 28, 2012 at 16:40

jaredbranum · Accepted Answer · 2012-05-28 17:16:52Z

As others have mentioned, you simply need to make 2 requests. In order to re-use the code you have already written, you could define a function to get json that takes a url argument. Something like this:

function getJson(url, callback){
  function handle_json() {
    if (http_request.readyState == 4) {
      if (http_request.status == 200) {
        var json_data = http_request.responseText;
        var parser = (JSON && typeof JSON.parse == 'function') ? JSON.parse : eval;
        var obj = parser("(" + json_data + ")");
        callback(obj);
      } else {
        alert("A problem ocurred");
      }
      http_request = null;
    }
  }

  var http_request = new XMLHttpRequest();
  http_request.onreadystatechange = handle_json;
  http_request.open("GET", url, true);
  http_request.send(null);
}

I replaced the call to eval with some logic that will call JSON.parse if it is present, otherwise it will use eval. Using this function would allow you to make multiple requests by calling it multiple times, like so:

getJson("some url", processData);
getJson("some other url", processData");

If you wanted to process data from different urls in different ways, just define another function similar to processData and pass it along instead, like getJson("some crazy url", processCrazyData);

Using a framework like jQuery would reduce the amount of code that you have to write, but this solution should get it done using basic javascript.

Death · Accepted Answer · 2012-05-28 16:42:05Z

-1

The easiest way would be to put it into a function.

function getJson(url) {
    //Remove the var url="string" line
    //Rest of code
}

function handleJson() {
    //Other code
}

Alternatively, you could use jQuery, in which case your code would be:

$.getJSON('url goes in here',function(data){
    processData(data);
});

And just use that whenever you want to grab a page.

answered May 28, 2012 at 16:42

Death

2,01713 silver badges14 bronze badges

Collectives™ on Stack Overflow

How can I retrieve multiple JSON files using JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related