How to parse JSONP response returned by api.themoviedb.org?

Question

I'm using themoviedb.org API to fetch the movie info. This is the code I'm using:

var req = new XMLHttpRequest();
req.open("GET", "http://api.themoviedb.org/2.1/Movie.search/en/json/XXX/immortals?callback=foobar", true);
req.send();
req.onreadystatechange=function() {
   if (req.readyState==4 && req.status==200) {
      console.log(req.responseText); 
   }
}

And I'm getting this response in the console:

foobar([{"score":null,"popularity":3,"translated":true,"adult":false,"language":"ru","original_name":"Immortals","name":"Immortals","alternative_name":"\"War of the Gods\"","movie_type":"movie","i".......}])

How do I parse this response to get the name attribute?

---

Updates:

Thank you everybody but the actual answer was given by hippietrail .

eval(req.responseText)

More details: Filtering to specific nodes in JSON - use grep or map?

Answer 1

add this function to your page :

( i see its an array - so i'll iterate each item... - if you want the first one only - so please specify.)

  function foobar(x)
    {
        $.each(x, function ()
        {
           alert(this.score);
        });

    }

http://jsbin.com/ojomej/edit#javascript,html

Answer 2

The URL you're using is for a JSONP call (see: http://en.wikipedia.org/wiki/JSONP ). JSONP is used when cross domain request through XMLHttpRequest are not allowed. But you're using XMLHttpRequest already so I believe you don't need a JSONP call. So, if you remove the querystring from the URL:

var req = new XMLHttpRequest();
req.open("GET", "http://api.themoviedb.org/2.1/Movie.search/en/json/XXX/immortals", true);

req.onreadystatechange=function() {
   if (req.readyState==4 && req.status==200) {
      console.log(req.responseText); 
   }
}

req.send();

You should get a JSON string:

[{"score":null,"popularity":3,"translated":true,"adult":false,"language":"ru","original_name":"Immortals","name":"Immortals","alternative_name":"\"War of the Gods\"","movie_type":"movie","i".......}]

That you can parse using JSON.parse (see: https://developer.mozilla.org/en/JSON ):

var data = JSON.parse(req.responseText);

Now you have a JavaScript object, in your case an array of objects, that you can use:

console.log(data[0].name) // "Immortals"

However, because the question is tagget "jquery", if you're using that library you can simplify a lot:

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/XXX/immortals", function (data) {
    console.log(data[0].name)
});

jquery will also take care of the browsers differences (eg if the browser doesn't support JSON object).

Hope it helps.

Answer 3

I don't have an API key to test this, but it seems you're not very familiar with either jQuery nor JSON. Anyway something like this might get you started:

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/XXX/immortals?callback=?",
   function(data) {
      alert(data[0].name);
   }
);