How to parse a JSON response in jQuery?

Question

I'm creating a small web-app for my girlfriend and I that will allow us to keep track of the movies we want to watch together. To simplify the process of adding a movie to the list, I'm trying to use TheMovieDatabase.org's API (supports JSON only) to allow us to search for a movie by title, let the database load a few results, and then we can choose to just add a movie from the database or create our own entry if no results were found.

I'm using jQuery to handle everything and, having never used JSON before, am stuck. I wrote a short bit of code to get the JSON based on my search query, and am now trying to populate a <ul> with the results. Here's what I have.

var TMDbAPI = "https://api.themoviedb.org/3/search/movie";
var moviequery = $("#search").val();
var api_key = "baab01130a70a05989eff64f0e684599";

$ul = $('ul');
$.getJSON( TMDbAPI,
{
    query: moviequery,
    api_key: api_key
},
function(data){
    $.each(data, function(k,v) {
            $ul.append("<li>" + k + ": " + v + "</li>");
        }
    );
});

The JSON file is structured as

{
"page":1,
"results":[
    {
    "adult":false,
    "backdrop_path":"/hNFMawyNDWZKKHU4GYCBz1krsRM.jpg",
    "id":550,
    "original_title":"Fight Club",
    "release_date":"1999-10-14",
    "poster_path":"/2lECpi35Hnbpa4y46JX0aY3AWTy.jpg",
    "popularity":13.3095569670529,
    "title":"Fight Club",
    "vote_average":7.7,
    "vote_count":2927
    }, ...
"total_pages":1,
"total_results":10
}

but all I'm getting is

page: 1
results: [object Object], ...
total_pages: 1
total_results: 10

I've searched quite extensively on the Internet for a solution, but with the little knowledge I have of JSON I wasn't able to learn much from the various examples and answers I found scattered about. What do?

The api in sending what it supose to send. If you want the movies you need to traverse data.results object — Cheluis
– Cheluis, Commented Jul 27, 2014 at 3:12
@Cheluis I know that the API is sending it correctly, I need to how to do whatever you said, because that is where my knowledge ends. — mcneiljm
– mcneiljm, Commented Jul 27, 2014 at 3:19
@Cheluis: I made the suggested edit, now I am given 0: [object Object],... (0-9, the ten fields in Results) — mcneiljm
– mcneiljm, Commented Jul 27, 2014 at 3:27

Martin Atkins · Accepted Answer · 2014-07-27 03:42:55Z

2

It looks like what you'd like to do is write out some properties of each movie in the list. This means you want to loop over the list in data.results, like this:

// Visit each result from the "results" array
$.each(
    data.results,
    function (i, movie) {
        var $li = $('<li></li>');
        $li.text(movie.title);
        $ul.append($li);
    }
);

This will make a list of movie titles. You can access other properties of movie inside the each function if you want to show more elaborate information.

I added the title to the li using $li.text rather than simply doing $('<li>' + movie.title + '</li>') since this will avoid problems if any of the movie titles happen to contain < symbols, which could then get understood as HTML tags and create some funny rendering. Although it's unlikely that a movie title would contain that symbol, this simple extra step makes your code more robust and so it's a good habit to keep.

edited Jul 27, 2014 at 3:42

answered Jul 27, 2014 at 3:27

Martin Atkins

76.3k9 gold badges152 silver badges168 bronze badges

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

4 Comments

mcneiljm Over a year ago

This gives me ten empty results :/

Janty Over a year ago

Yes Martin is right. I think you are parsing json but not defining the key value pair correctly. Data.result[index]. title will give you the result you needed and set it as your requirements.

Martin Atkins Over a year ago

I have just corrected a bug in my example where I missed the first parameter i on the callback function. It should work now.

mcneiljm Over a year ago

@martin I just figured that out at the same time you did apparently :) That did the trick. Thank you.

Cheluis · Accepted Answer · 2014-07-27 03:28:04Z

2

You need to traverse the results object. In the $.each function change data for data.results

answered Jul 27, 2014 at 3:28

Cheluis

1,4123 gold badges22 silver badges51 bronze badges

1 Comment

mcneiljm Over a year ago

I made the suggested edit, now I am given 0: [object Object],... (0-9, the ten fields in Results)

r3wt · Accepted Answer · 2014-07-27 03:38:43Z

You can use a simple for loop to iterate over the list/array. in the example below i am appending a list item containing the value of the key results[i].title. you can append the values of as many valid keys as you would like to the div.

var TMDbAPI = "https://api.themoviedb.org/3/search/movie";
var moviequery = $("#search").val();
var api_key = "baab01130a70a05989eff64f0e684599";

$ul = $('ul');
$.getJSON( TMDbAPI,
{query: moviequery,api_key: api_key},function(data){
    var results = data.results;//cast the data.results object to a variable
    //iterate over results printing the title and any other values you would like.
    for(var i = 0; i < results.length; i++){
        $ul.append("<li>"+ results[i].title +"</li>");
    }

});

Thanks for the contribution, I only wish I could say that worked haha. I'll keep on chuggin' along.

guest271314 · Accepted Answer · 2014-07-27 04:41:51Z

html

<input id="search" type="text" placeholder="query" />
<input id="submit" type="submit" value="search" />

js

$(function () {
    $("#submit").on("click", function (e) {
        var TMDbAPI = "https://api.themoviedb.org/3/search/movie";
        var moviequery = $("#search").val();
        var api_key = "baab01130a70a05989eff64f0e684599";

        $.getJSON(TMDbAPI, {
            query: moviequery,
            api_key: api_key
        },

        function (data) {
            $("ul").remove();
            var ul = $("<ul>");
            $(ul).append("<li><i>total pages: <i>" 
                        + data.total_pages + "\n" 
                        + "<i>current page: </i>" 
                        + data.page 
                        + "</li>");
            $.each(data.results, function (k, v) {
                $(ul).append("<li><i>title: </i>" 
                            + v.original_title + "\n" 
                            + "<i>release date: </i>" + v.release_date + "\n" 
                            + "<i>id: </i>" + v.id + "\n" 
                            + "<i>poster: </i>" 
                            + v.poster_path 
                            + "</li>");
            });
            $("body").append($(ul))
        });
    });
});

jsfiddle http://jsfiddle.net/guest271314/sLSHP/

Collectives™ on Stack Overflow

How to parse a JSON response in jQuery?

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Related