javascript - 如何在 jQuery 中解析 JSON 响应？

Question

我正在为我和我的女朋友创建一个小型网络应用程序，这将使我们能够跟踪我们想一起观看的电影。为了简化将电影添加到列表的过程，我尝试使用 TheMovieDatabase.org 的 API(仅支持 JSON)来允许我们按标题搜索电影，让数据库加载一些结果，然后我们可以选择仅从数据库添加电影或创建我们自己的条目(如果未找到结果)。

我使用 jQuery 来处理所有事情，但之前从未使用过 JSON，所以陷入了困境。我编写了一小段代码来根据我的搜索查询获取 JSON，现在正在尝试填充 <ul>与结果。这是我所拥有的。

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

JSON 文件的结构为

{
"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
}

但我得到的只是

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

我在互联网上广泛搜索了解决方案，但由于我对 JSON 知之甚少，我无法从分散的各种示例和答案中学到很多东西。做什么？

Answer 1

看起来您想要做的是写出列表中每部电影的一些属性。这意味着您想要循环 data.results 中的列表。 ，像这样:

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

这将创建一个电影标题列表。您可以访问movie的其他属性里面each如果您想显示更详细的信息，请使用此函数。

我将标题添加到 li使用$li.text而不是简单地做$('<li>' + movie.title + '</li>')因为如果任何电影标题碰巧包含<，这将避免出现问题。符号，然后可以被理解为 HTML 标签并创建一些有趣的渲染。尽管电影标题不太可能包含该符号，但这个简单的额外步骤可以使您的代码更加健壮，因此这是一个值得保留的好习惯。