Handling Multiple JSON Objects

Question

If I have a function like this, i pass in a variable of movieid.

function getFilmDetails(movieid) {
    var filmDetails = 0;


    $.ajax({

        dataType: "json",
        type: 'get',
        mimeType: "textPlain",
        url: 'http://api.themoviedb.org/3/movie/' + movieid,
        async: false,
        success: function(result){

             if(result.popularity > 10000) {
                 result.popularity = 10000;
            } 
            if(result.popularity < 0.1) {
                 result.popularity = 0.1;
            } 

            filmDetails = result;
        }
    });

    return filmDetails;
}

I'm calling over 100 films details through this function and as you can imagine, it takes forever to load the page by doing it this way. I need to easily access the values in the JSON for each film. For example:

alert(getFilmDetails(12345).description);
alert(getFilmDetails(65432).popularity);
alert(getFilmDetails(12345).tagline);

Is there a better way to do this?

You're using async:false;... why? Have your function accept a callback. getFilmDetails(12345, function(data) { alert(data); }) Then inside your function, inplace of the filmDetails = result;, invoke the callback, and pass it result, like callback(result); — the system
– the system, Commented Mar 3, 2013 at 16:59
You should not fire over 100 ajax (and neither 100 sjax) requests from a single page — Bergi
– Bergi, Commented Mar 3, 2013 at 17:00

the system · Accepted Answer · 2013-03-03 17:06:25Z

1

    // receive a callback------------v
function getFilmDetails(movieid, callback) {
    var filmDetails = 0;
    $.ajax({
        dataType: "json",
        type: 'get',
        mimeType: "textPlain",
        url: 'http://api.themoviedb.org/3/movie/' + movieid,
//        async: false,  // YUCK! Commented out

        success: function(result){

            if(result.popularity > 10000) {
                 result.popularity = 10000;
            } 
            if(result.popularity < 0.1) {
                 result.popularity = 0.1;
            } 
            callback(result) // invoke your callback
    });
    return filmDetails;
}

  // make a callback
function workWithData(data) {
    alert(data.description);
}

  // pass the callback
getFilmDetails(12345, workWithData);

answered Mar 3, 2013 at 17:06

the system

9,35642 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AntonCooper Over a year ago

Is there any way that I can pass the call backed data into an array which contains multiple result sets. The code above works, but if I try to push it into an array, the value is not returned when called outside the function.

the system Over a year ago

@AntonCooper: Most important thing is to break away from hoping things will happen in a simple, synchronous order. The way to approach these async issues is to find creative ways to accomplish what you want. For example if you know you're going to make 100 requests, and you want your callback to do something special after the last request is done, you could maintain a counter that equals the number of requests you're making, then have each callback decrement the counter. When the counter reaches 0, you know the last response came back, so that callback can work with the full Array of data.

Peeyush Over a year ago

@thesystem may be i am asking something funny but i am just curious to ask that why you added a callback? Is it just because you want to access the data in JSON format?

the system Over a year ago

@Peeyush: The callback doesn't have anything to do with the data format. It just allows a person to deal with the code that runs out of order. Because the rest of the code (below the getFilmDetails(...) call) won't wait for the data to return before running, any code that uses the fetched data (when it finally arrives) must be invoked inside the success: callback. Passing another callback to the success: callback is a nice way to pass the necessary code into the function doing the AJAX request.

Collectives™ on Stack Overflow

Handling Multiple JSON Objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest