jquery .each array json

ここに新しいが、これは私の最初の投稿であり、誰かが私を助けてくれることを願っています。また、jquery/jquery-mobile、API、JSONの新機能もあります。jquery .each array json

私はaspxサイトを使用しています。

jqueryモバイル、API、およびJSONファイルのヘルプを使用してモバイル上でムービーを検索していますが、配列は1つですが、1度に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>

出典

2017-01-19 Panzer

コードワークに加えられた変更の概要：

あなたは$.each()コール内#movieセクションをクリアする$.html('')を使用しています。代わりに、ループの外側で一度だけ実行する必要があります。
$('#movie')は、引数として'#movie'で実行されているjQuery関数であり、処理時間が必要です。プロセスの時間を節約する方法は、$.append()の方法があります。
$.getJSON(url, callback)は非同期メソッドで、あなたのjson変数は、APIがその仕事を終えた後にのみ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>'); 
     }); 
    }); 
});

出典

2017-01-19 17:14:53

THXのdidntは[i]がと私もvalue.Searchに[0] value.Searchを交換した:)ことを知っているが、それはまだいけません仕事：/ /しかし、thx – Panzer

ループは1回実行されているか、実行されていませんか？ –

全くない、ボタンのように働かない。私はそれを押すことができますが、何も起こりません。 – Panzer

答えて

関連する問題