CODEWITHSUNDEEP
javascriptjqueryjsonparsingget
mcneiljm
mcneiljm

Reputation: 77

How to parse a JSON response in jQuery?

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?

Upvotes: 0

Views: 481

Answers (4)

guest271314
guest271314

Reputation: 1

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/

Upvotes: 0

Martin Atkins
Martin Atkins

Reputation: 74269

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.

Upvotes: 2

r3wt
r3wt

Reputation: 4742

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>");
    }

});

Upvotes: 1

Cheluis
Cheluis

Reputation: 1412

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

Upvotes: 2

Related Questions