jQuery에서 JSON 응답을 구문 분석하는 방법은 무엇입니까?

Question

나는 여자 친구를위한 작은 웹 앱을 만들고 있는데, 우리가 함께보고 싶어하는 영화를 계속 추적 할 수있게 해줄 것이다. 목록에 동영상을 추가하는 과정을 단순화하기 위해 TheMovieDatabase.org의 API (JSON 만 지원)를 사용하여 제목으로 영화를 검색하고 데이터베이스에 몇 가지 결과를로드 한 다음 결과가 없으면 데이터베이스에서 동영상을 추가하거나 자체 항목을 만듭니다.

전 JSON을 사용하지 않고 모든 것을 처리하기 위해 jQuery를 사용하고 있습니다. 내 검색 쿼리를 기반으로 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

목록에서 각 영화의 일부 속성을 작성하는 것 같습니다. 이 영화 타이틀의 목록을 만들 것입니다

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

: 이것은 당신이이 같은 data.results의 목록을 통해 루프, 원하는 것을 의미합니다. 보다 정교한 정보를 표시하려면 movie의 다른 속성 인 each 함수를 이용할 수 있습니다.

나는 영화 타이틀의 다음 HTML 태그로 이해받을 수 < 문자를 포함하고 약간의 재미 렌더링을 만드는 일 경우이 문제를 피할 수 있기 때문에 단순히 $('<li>' + movie.title + '</li>')을하는 것이 아니라 $li.text를 사용하여 li에 타이틀을 추가했다. 영화 제목에 해당 기호가 포함되어있을 가능성은 거의 없지만이 간단한 추가 단계로 코드가 더욱 강력 해 지므로 보관하는 것이 좋습니다.

Answer 2

결과 개체를 탐색해야합니다. $. 각각의 함수에서 data.results에 대한 데이터 변경

Answer 3

간단한 for 루프를 사용하여 목록/배열을 반복 할 수 있습니다. 아래 예제에서는 키 값이 results[i].title 인 목록 항목을 추가하고 있습니다. 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>"); 
    } 

}); 

Answer 4

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/