How to retrieving data from multiple Json files using jquery

Question

I am trying to use jquery to retrieve data from two json file and display it in a html page. I have it working with retrieving data from one file but not the second. When I try to retrieve from a second it will not work. I think it is down to the jquery. I am pretty new to javascript and jquery.

Here is my code:

<html><head>

             <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script type="text/javascript">      


               var apikey = "qqye3xdazwafg573shyyew6k";
               var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies/";

               // construct the uri with our apikey
               var query = "771362176";
            var moviesSearchUrl = '.json?country=ie&apikey=' + apikey;

            $(document).ready(function () {

                // send off the query
                $.ajax({
                    url: baseUrl + query + moviesSearchUrl,
                    dataType: "jsonp",
                    success: searchCallback
                });
            });

            // callback for when we get back the results
            function searchCallback(data) {

                $('#title').text(data.title);
                $("#movie_img").attr({ src: data.posters.detailed, title: data.title + "poster", alt: data.title + "poster" });
                $('#genres').text(data.genres[0]);
                $('#release_dates').text(data.release_dates.theater);
                $('#mpaa_rating').text(data.mpaa_rating);
                $('#critics_consensus').text(data.critics_consensus);
                $('#critics_score').text(data.ratings.critics_score);
                $('#audience_score').text(data.ratings.audience_score);

                var director = "";
                for (var i = 0; i < data.abridged_directors.length; i++) {
                    if (i != 0 && i == data.abridged_directors.length - 1) {
                        // and the position of the character is greater than 0
                        director += '& ' + data.abridged_directors[i].name;
                    }
                    else if (i != data.abridged_directors.length - 1 && i != data.abridged_directors.length - 2) {
                        director += data.abridged_directors[i].name + ', ';
                    }
                    else
                        director += data.abridged_directors[i].name + ' ';
                }
                $('#director').text(director);

                var cast = "";
                for (var i = 0; i < data.abridged_cast.length; i++) {
                    cast += data.abridged_cast[i].name + " as ";
                    for (var j = 0; j < data.abridged_cast[i].characters.length; j++) {
                        if (i == data.abridged_cast.length - 1 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += data.abridged_cast[i].characters[j];
                        }
                        else if (j != 0 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += '& ' + data.abridged_cast[i].characters[j];
                        }
                        else if (j != data.abridged_cast[i].characters.length - 1 && j != data.abridged_cast[i].characters.length - 2) {
                            cast += data.abridged_cast[i].characters[j] + ' ';
                        }
                        else cast += data.abridged_cast[i].characters[j] + ', ';
                    }
                }
                $('#cast').text(cast);
                $('#description').text(data.synopsis);

            }
 </script>

    <script type="text/javascript">      


               var apikey = "qqye3xdazwafg573shyyew6k";
               var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies/";

               // construct the uri with our apikey
               var query2 = "771311994";
            var moviesSearchUrl = '.json?country=ie&apikey=' + apikey;

            $(document).ready(function () {

                // send off the query
                $.ajax({
                    url: baseUrl + query2 + moviesSearchUrl,
                    dataType: "jsonp",
                    success: searchCallback
                });
            });

            // callback for when we get back the results
            function searchCallback(data) {

                $('#title2').text(data.title);
                $("#movie_img2").attr({ src: data.posters.detailed, title: data.title + "poster", alt: data.title + "poster" });
                $('#genres2').text(data.genres[0]);
                $('#release_dates2').text(data.release_dates.theater);
                $('#mpaa_rating2').text(data.mpaa_rating);
                $('#critics_consensus2').text(data.critics_consensus);
                $('#critics_score2').text(data.ratings.critics_score);
                $('#audience_score2').text(data.ratings.audience_score);

                var director = "";
                for (var i = 0; i < data.abridged_directors.length; i++) {
                    if (i != 0 && i == data.abridged_directors.length - 1) {
                        // and the position of the character is greater than 0
                        director += '& ' + data.abridged_directors[i].name;
                    }
                    else if (i != data.abridged_directors.length - 1 && i != data.abridged_directors.length - 2) {
                        director += data.abridged_directors[i].name + ', ';
                    }
                    else
                        director += data.abridged_directors[i].name + ' ';
                }
                $('#director2').text(director);

                var cast = "";
                for (var i = 0; i < data.abridged_cast.length; i++) {
                    cast += data.abridged_cast[i].name + " as ";
                    for (var j = 0; j < data.abridged_cast[i].characters.length; j++) {
                        if (i == data.abridged_cast.length - 1 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += data.abridged_cast[i].characters[j];
                        }
                        else if (j != 0 && j == data.abridged_cast[i].characters.length - 1) {
                            cast += '& ' + data.abridged_cast[i].characters[j];
                        }
                        else if (j != data.abridged_cast[i].characters.length - 1 && j != data.abridged_cast[i].characters.length - 2) {
                            cast += data.abridged_cast[i].characters[j] + ' ';
                        }
                        else cast += data.abridged_cast[i].characters[j] + ', ';
                    }
                }
                $('#cast2').text(cast);
                $('#description2').text(data.synopsis);

            }
 </script>
 </head<body>

     <h3 id="title">
     </h3>
            <strong>
     Release Date: </strong><span id="release_dates"></span><br />
            <img id="movie_img" src="no_image.jpg" alt="movie image" /><br />     
            <strong>Genre: </strong><span id="genres"></span><br />
            <strong>MPAA: </strong><span id="mpaa_rating"></span><br />
            <strong>Critics Consensus: </strong><span id="critics_consensus"></span><br />
            <strong>Critics Score: </strong><span id="critics_score"></span><br />
            <strong>Audience Score: </strong><span id="audience_score"></span><br />
            <strong>Actors: </strong><span id="cast"></span><br />
            <strong>Director(s): </strong><span id="director"></span><br />
            <strong>Description: </strong><span id="description"></span><br />  

     <h3 id="title2">
     </h3>
            <strong>
     Release Date: </strong><span id="release_dates2"></span><br />
            <img id="movie_img2" src="no_image.jpg" alt="movie image" /><br />     
            <strong>Genre: </strong><span id="genres2"></span><br />
            <strong>MPAA: </strong><span id="mpaa_rating2"></span><br />
            <strong>Critics Consensus: </strong><span id="critics_consensus2"></span><br />
            <strong>Critics Score: </strong><span id="critics_score2"></span><br />
            <strong>Audience Score: </strong><span id="audience_score2"></span><br />
            <strong>Actors: </strong><span id="cast2"></span><br />
            <strong>Director(s): </strong><span id="director2"></span><br />
            <strong>Description: </strong><span id="description2"></span><br />  
            </body>                          </html>

Any advice greatly appreciated.

You should combine this into a single script... you have 2 on load events, theoretically executing simultaneosly. Reorginize it like this — olexity
– olexity, Commented Apr 18, 2014 at 19:59

lorefnon · Accepted Answer · 2014-04-18 19:56:31Z

3

Both callbacks have same names and are defined in global scope. The latter one is hoisted and used for both $.ajax calls. Having them in separate script tags does not isolate them to different scopes.

This fiddle should help illustrate the concept better : http://jsfiddle.net/meqXL/

You may want to do something like the following :

<script type="text/javascript"> 
(function(){
  // Code inside
})()
</script>

for both of your script tags.

I'd also strongly suggest you to take a look at some templating libraries. Your approach is quite crude.

edited Apr 18, 2014 at 19:56

answered Apr 18, 2014 at 19:50

lorefnon

13.1k8 gold badges66 silver badges97 bronze badges

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

Comments

Alexander Ejbekov · Accepted Answer · 2014-04-18 19:54:31Z

2

A couple of problems here. The AJAX is working fine. The real problems: The function searchCallback(data) which you are defining twice. The browser is likely to take the last definition and use it in every place you call it. So it's happening really quick so you probably can't see it, but it loads the first call, puts it into the page and then loads the second one and loads the data into the same containers.

If you change line 89: success: searchCallback to success: searchCallback2 and line 94: function searchCallback(data) { to function searchCallback2(data) { you will see that it works. I would advise you however to remove one of the functions and modify the other so it takes a data and container id and it prefills them based on what you've given it:

function searchCallback(data, id) { $('#title' + id).text(data.title);

etc.

answered Apr 18, 2014 at 19:54

Alexander Ejbekov

6,0501 gold badge28 silver badges27 bronze badges

1 Comment

aazzaawwaazzaa Over a year ago

thank you so much seems to be working great only thing now is I am not how to prefill the ids in the html based on what I've give it. I was trying to use e.g. <h1 id="title1"></h1> and <h1 id="title2"></h1> how would I make it say <h1 id="title1 + id"></h1>

olexity · Accepted Answer · 2014-04-18 20:02:58Z

var apikey = "qqye3xdazwafg573shyyew6k";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies/";
var moviesSearchUrl = '.json?country=ie&apikey=' + apikey;
var query = "771362176";
var query2 = "771311994";
var counter = 1;

        $(document).ready(function () {

            // send off the query
            $.ajax({
                url: baseUrl + query + moviesSearchUrl,
                dataType: "jsonp",
                success: searchCallback
            });
            counter++; 
             $.ajax({
                url: baseUrl + query2 + moviesSearchUrl,
                dataType: "jsonp",
                success: searchCallback
            });
            counter++;

        });

        // callback for when we get back the results
        function searchCallback(data) {

            $('#title'+counter).text(data.title);
            $("#movie_img"+counter).attr({ src: data.posters.detailed, title: data.title + "poster", alt: data.title + "poster" });
            $('#genres'+counter).text(data.genres[0]);
            $('#release_dates'+counter).text(data.release_dates.theater);
            $('#mpaa_rating'+counter).text(data.mpaa_rating);
            $('#critics_consensus'+counter).text(data.critics_consensus);
            $('#critics_score'+counter).text(data.ratings.critics_score);
            $('#audience_score'+counter).text(data.ratings.audience_score);

            var director = "";
            for (var i = 0; i < data.abridged_directors.length; i++) {
                if (i != 0 && i == data.abridged_directors.length - 1) {
                    // and the position of the character is greater than 0
                    director += '& ' + data.abridged_directors[i].name;
                }
                else if (i != data.abridged_directors.length - 1 && i != data.abridged_directors.length - 2) {
                    director += data.abridged_directors[i].name + ', ';
                }
                else
                    director += data.abridged_directors[i].name + ' ';
            }
            $('#director'+counter).text(director);

            var cast = "";
            for (var i = 0; i < data.abridged_cast.length; i++) {
                cast += data.abridged_cast[i].name + " as ";
                for (var j = 0; j < data.abridged_cast[i].characters.length; j++) {
                    if (i == data.abridged_cast.length - 1 && j == data.abridged_cast[i].characters.length - 1) {
                        cast += data.abridged_cast[i].characters[j];
                    }
                    else if (j != 0 && j == data.abridged_cast[i].characters.length - 1) {
                        cast += '& ' + data.abridged_cast[i].characters[j];
                    }
                    else if (j != data.abridged_cast[i].characters.length - 1 && j != data.abridged_cast[i].characters.length - 2) {
                        cast += data.abridged_cast[i].characters[j] + ' ';
                    }
                    else cast += data.abridged_cast[i].characters[j] + ', ';
                }
            }
            $('#cast'+counter).text(cast);
            $('#description'+counter).text(data.synopsis);

        }

thanks for the help olexity although it doesn't seem to work?

Collectives™ on Stack Overflow

How to retrieving data from multiple Json files using jquery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related