How to recover data from multiple Json files using jquery

advertisements

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.


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.