Call/Select certain item in Json Data

Question

Im working on a personal jQuery/ajax/json project, and i am trying to collect data from the TMDB API. Where I want people to search for a certain term, for example the movie Fight Club. What should happen is that see a movie poster which matches the movie title entered.

I got this so far:

$.ajax({ type: "GET", dataType: "jsonp", cache: false, url: "https://api.themoviedb.org/3/search/movie?api_key=257654f35e3dff105574f97fb4b97035&query=fight+club", success: toonTMDBresults // at succes, run the function toonTMDBResults });

        function toonTMDBresults(tmdbJson) {

                console.log('TMDB:', tmdbJson);
                if ( 1 == 1 ) { // if 1 equals 1, so always run the following code... :)
                    for (var idx in tmdbJson.data) { //loop through the results
                        var results = tmdbJson.data[idx];
                        console.log(results);


                       console.log(results.results[0].id);  //take the ID of the first result in the array


                    }
                } else {
                    console.log('problem with the TMDB request:', json.meta.code);
                }

What I wanted to happen is that I see the Id of the movie in my console. If I am able to do that, I would be able to select the poster_path from the json data and show the movie poster in my html.

But the problem is I am not getting the ID in my console as I requested, so i am doing something wrong.

Thanks,

Mark

kobigurk · Answer 1 · 2014-07-03T07:33:24.790

0

tmdbJson.data doesn't exist. The object returned is :

TMDB: Object {page: 1, results: Array[10], total_pages: 1, total_results: 10}

You probably meant iterating over tmdbJson.results. This is a working version of your function:

function toonTMDBresults(tmdbJson) {

            console.log('TMDB:', tmdbJson);
            console.log('first id: ', tmdbJson.results[0].id);
            console.log('first poster path: ', tmdbJson.results[0].poster_path);
            if ( 1 == 1 ) { // if 1 equals 1, so always run the following code... :)
                for (var idx in tmdbJson.results) { //loop through the results
                    var results = tmdbJson.results[idx];
                    console.log(results);


                   console.log(results.id);  //take the ID of the first result in the array


                }
            } else {
                console.log('problem with the TMDB request:', json.meta.code);
            }
}

edited Jul 03 '14 at 07:33

answered Jul 03 '14 at 07:04

kobigurk

731
5
14

Thanks a lot :) Now I am trying to do the same, but just for the first poster_path. But console.log(results[1].poster_path); doesnt seem to work. How do I retreive just 1 result instead of 10 results? (10 = default). – user3771895 Jul 03 '14 at 07:31
I added an example (before the if) of printing the first id and poster_path. Keep in mind that in javascript, arrays start with index 0, not 1. Also keep in mind, that the `results` variable we defined refers to a single movie. To work with a single movie yourself, look at the example. You need to access the `tmdbJson.results` and subindex it. – kobigurk Jul 03 '14 at 07:33
thanks a lot. Got it working now. Now im trying to create a div and place the image there of the movie. trying to use this: $('#posterarea').append('image.tmdb.org/t/p/w500/' + posterpath); But that doesnt work. Even when I write this: I get an error: Users/Mark/Desktop/twitter/image.tmdb.org/t/p/w500/hpt3aa5i0TrSAnEdl3VJrRrje8C.jpg net::ERR_FILE_NOT_FOUND Which is strange because if you go to that url, you do actually see the correct image. – user3771895 Jul 03 '14 at 07:58
you forgot http :-) if you don't put it, the path will be relative to your site. It should be – kobigurk Jul 03 '14 at 07:59
Yes that worked, thanks:) But when I try to place the image there from the json data it doesnt. I think I did something wrong. I created a div with an . And so add the right url I did this in jQuery: $('#posterarea' > '').append('http://image.tmdb.org/t/p/w500/' + posterpath); I dont know anymore how to add two elements within the $(...) part. Like, the in the div "posterarea". – user3771895 Jul 03 '14 at 08:15
Please refer to : http://stackoverflow.com/questions/8013792/how-to-create-a-new-img-tag-with-jquery-with-the-src-and-id-from-a-javascript-o – kobigurk Jul 03 '14 at 08:24
Adapt `#imagediv` to `#posterarea`and of course your `src` attribute. – kobigurk Jul 03 '14 at 08:25

Call/Select certain item in Json Data

1 Answers1