JQuery/JSONが動作しないOMDb APIの検索

Question

私はAPIを使うことを学んでいます。私はムービータイトルのOMDb APIを検索し、ムービーイメージ/ポスターを自分のサイトに表示しようとしています。私はこのコードを動作させることができず、私が間違っている場所を知っていることに感謝します。前もって感謝します。私が気づい

 // Creating the AJAX Request 
// 
$('form').submit(function(event) { 
    // Stop the form from submitting 
    event.preventDefault(); 

    // Get The value from the form 
    var movieURL = "http://www.omdbapi.com/?"; 
    var movieName = $('#search').val(); 
    var movieOptions = { 
    s: "", 

    }; 

    function displayMovies(data) { 
    var movieHTML = '<ul>'; 
    $.each(data.items, function(index, value) { 
     movieHTML += '<li>'; 
     movieHTML += '<img '; 
     movieHTML += 'src="' + value.Poster + '" '; 
     movieHTML += 'alt="' + value.Title + '" >'; 
     movieHTML += '</li>'; 
    });//end each 
    movieHTML += '</ul>'; 
    $('movieInformation').html(movieHTML); 

    } 
    $.getJSON(movieURL, movieOptions, displayMovies);// end getJSON 

}); // end submit function 



    <div class="heading"> 
     <h1>Movie Search</h1> 
     <form> 
      <label for="search">Type a movie title</label> 
      <input type="search" name="search" id="search"> 
      <input type="submit" value="Search" id="submit"> 
     </form> 

     </div> 



    <div id="movieInformation"> 
    </div> 

Answer 1

いくつかのこと：

movieURLは、APIに従って適切に構築されたURLではありません。送信しているリクエストには検索値は含まれていません。あなたは持っている：

"http://www.omdbapi.com/?"の代わり：

"https://www.omdbapi.com/?t="+movieName

応答がオブジェクトであり、そして「items`プロパティが含まれていません：私が作成した

$.each(data.items, function(index, value) {

をあなたの応答の内容を記録するfiddle data。どのプロパティにアクセスできるかが正確にわかります。

https://jsfiddle.net/um69o5t3/1/

更新：

は、ここで私は変わっものです：

$('form').submit(function(event) { 
 
    // Stop the form from submitting 
 
    event.preventDefault(); 
 

 
    // Get The value from the form 
 
    var movieName = $('#search').val(); 
 
    var movieURL = "https://www.omdbapi.com/?t="+movieName; 
 

 
    var movieOptions = { 
 
    s: "", 
 

 
    }; 
 

 
    function displayMovies(data) { 
 
    console.log(data); 
 
    /* var movieHTML = '<ul>'; 
 
    $.each(data.items, function(index, value) { 
 
     movieHTML += '<li>'; 
 
     movieHTML += '<img '; 
 
     movieHTML += 'src="' + value.Poster + '" '; 
 
     movieHTML += 'alt="' + value.Title + '" >'; 
 
     movieHTML += '</li>'; 
 
    });//end each*/ 
 
    console.log(data.Title); 
 
     var movieHTML = '<ul>'; 
 
     movieHTML += '<li>'; 
 
     movieHTML += '<img '; 
 
     movieHTML += 'src="' + data.Poster + '" '; 
 
     movieHTML += 'alt="' + data.Title + '" >'; 
 
     movieHTML += '</li>'; 
 
    
 
    movieHTML += '</ul>'; 
 
    $('#movieInformation').html(movieHTML); 
 

 
    } 
 
    $.getJSON(movieURL, movieOptions, displayMovies);// end getJSON 
 

 
}); // end submit function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="heading"> 
 
     <h1>Movie Search</h1> 
 
     <form> 
 
      <label for="search">Type a movie title</label> 
 
      <input type="search" name="search" id="search"> 
 
      <input type="submit" value="Search" id="submit"> 
 
     </form> 
 

 
     </div> 
 

 

 

 
    <div id="movieInformation"> 
 
    </div>