2017-01-19 4 views
1

임 새로운 여기에 그리고 이것은 내 첫 게시물이며 누군가 나를 도울 수 있기를 바랍니다. 메신저도 jquery/jquery-mobile, API 및 JSON에 새로 추가jquery. 각 배열 json

메신저 aspx 사이트를 사용하여 도움이 될지 모르겠다.

메신저 jquery 모바일, API 및 JSON 파일의 도움으로 모바일에서 영화를 검색하는 것은 배열이지만 한 번에 1 개 이상의 영화를 가져올 수있는 방법을 찾을 수 없습니다.

누군가가 나를 도울 수 있기를 바랍니다. 코드 작업에 대한 변경의

$(document).ready(function() { 
 

 
    $("#Search_B").click(function() { 
 

 
     $("#intro_h3").hide(); 
 

 
     var S_Value = $('#GetMovies').val(); 
 
     var url = 'http://www.omdbapi.com/?s=' + S_Value; 
 
     var json = $.getJSON(url); 
 

 
     console.log(url); 
 

 

 
     $("#Search_B").each(json, function(i, value) { 
 

 
     $('#movie').html(''); 
 
     $('#movie').append('<h2> Title: ' + value.Search[0].Title + ' </h2>'); 
 
     $('#movie').append('<h3> Year: ' + value.Search[0].Year + ' </h3>'); 
 
     $('#movie').append('<h3> Type: ' + value.Search[0].Type + ' </h3>'); 
 
     $('#movie').append('<a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> <img src=' + movie.Search[0].Poster + ' /> </a>'); 
 
     $('#movie').append('<br><a href=http://www.imdb.com/title/' + value.Search[0].imdbID + ' target="_blank"> Imdb </a>'); 
 
     }); 
 

 
    }); 
 

 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head runat="server"> 
 
    <title></title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div> 
 

 
     <div data-role="page" id="page1"> 
 
     <div data-role="header"> 
 
      <h1>Welcome to the online movie searcher</h1> 
 
      <div data-role="navbar"> 
 
      <ul> 
 
       <li><a href="#page1">Home</a> 
 
       </li> 
 
       <li><a href="#page2">Options</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 

 
     <div data-role="main" class="ui-content"> 
 

 
      <!-- <input type="text" id="EnterMovie" /> --> 
 
      <input type="search" id="GetMovies" /> 
 
      <input type="button" id="Search_B" value="Search" /> 
 

 
      <div id="movie"></div> 
 

 

 
      <h3 id="intro_h3">Search for a movie up top!</h3> 
 

 

 
     </div> 
 

 
     <div data-role="footer"> 
 
      <h1>My Footer</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

답변

1

요약 : 당신은 $.each() 전화 내부의 #movie 부분을 취소 $.html('')를 사용하는

  • . 대신 루프 밖에서 한 번만 수행해야합니다.

  • $('#movie')은 인수로 '#movie'과 함께 실행되는 jQuery 함수이며 처리 시간이 필요합니다. 프로세스 시간을 절약하기 위해 $.append() 체인 방법을 사용할 수 있습니다.

  • $.getJSON(url, callback)는 API가 작업을 완료 한 후에 만 ​​json 변수는 callback 함수 내에서 사용할 수 있습니다, 비동기 방법이다.

  • $.each(array, function(key, val) {})은 배열로 JSON 객체와 함께 사용할 수 없습니다. 첫 번째 인수는 반복 가능한 json.Search이어야합니다.

귀하의 최종 코드가 같아야합니다 :

$(document).ready(function() { 
    $("#Search_B").click(function() { 
    $("#intro_h3").hide(); 
    $('#movie').html(''); 

    var S_Value = $('#GetMovies').val(); 
    var url = 'http://www.omdbapi.com/?s=' + S_Value; 

    $.getJSON(url, function waitAPIthen (json) { 
     $.each(json.Search, function (key, item) { 
      $('#movie') 
      .append('<h2> Title: ' + item.Title + ' </h2>') 
      .append('<h3> Year: ' + item.Year + ' </h3>') 
      .append('<h3> Type: ' + item.Type + ' </h3>') 
      .append('<a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> <img src=' + item.Poster + ' /> </a>') 
      .append('<br><a href=http://www.imdb.com/title/' + item.imdbID + ' target="_blank"> Imdb </a>'); 
     }); 
    }); 
}); 
+0

들으 didnt 한이 이와 나는 또한 value.Search [0] value.Search [I]로,하지만 여전히 해달라고 대체했다 :) 것을 알고있다 work : /하지만 thx – Panzer

+0

루프가 한 번 실행되거나 실행되지 않습니까? –

+0

전혀 버튼이 작동하지 않습니다. 나는 그것을 누를 수는 있지만 아무 일도 일어나지 않는다. – Panzer