$ .getJSONは未定義を返し、要求されたデータを返します

Question

私は自分自身を状況に陥れました。私は個人的な練習プロジェクトのためにWikipedia検索ツールをコーディングしていましたが、小さなエラーに遭遇しました。ユーザが検索バーに単語を入力すると、入力は$.getJSONというデータパラメータに格納され、検索バーに入力された単語に基づいてタイトルと説明オブジェクトの配列が返されます。 $.getJSON機能は、タイトルの5つのセットを表示し、指定されたHTMLのリスト形式の説明を表示します。十分に単純ですが、問題はという文言を表示する$.getJSON関数であり、次に必要なタイトルと説明のセットを表示し続けます。以下は私のJSコーディングのリストです。また、完全なコードは私のcodepenで見ることができます。

誰でも私に問題の可能性があることを教えてもらえますか。 $.getJSONは非同期であるため、それが問題になるかもしれませんが、私はその上に指を置くことはできません。前もって感謝します！

$("#search-word").on("keydown", function(event) { 
if(event.keyCode == 13) { 
    event.preventDefault(); 
    var input = {search: $(this).val()}; 
    getWikiInfo(input); 
} 
});//search end 

function getWikiInfo(input) { 
var wikipApi = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&callback=?"; 
var getWikipHtml = function(response) { 
    console.log(response); 
    var wikipHtml; 
    for(var i = 1; i < 6; i++) { 
    wikipHtml += '<div class="list"><h3>' + response[1][i] + '</h3><p>' + response[2][i] + '</p></div>'; 
    } 
    $("#list-container").html(wikipHtml); 
    } 
$.getJSON(wikipApi, input, getWikipHtml); 
}//getWikiInfo end 

Answer 1

マイナーチェンジを行う必要があります。空の文字列にを初期化し、response[1][i]がundefinedでないかどうかを確認します。以下は、更新されたコードは次のとおりです。

var wikipHtml = ''; 
for (var i = 1; i < 6; i++) { 
    if (response[1][i] !== undefined) 
    wikipHtml += '<div class="list"><h3>' + response[1][i] + '</h3><p>' + response[2][i] + '</p></div>'; 
} 

Answer 2

あなたがそれに追加する前にwikipHtmlを初期化されていないので、これが起こっているが、私は強くあなたが文字列の連結使用してHTMLを構築するのではなく、適切なDOM操作を使用することをお勧めします：

を

$("#search-word").on("keydown", function(event) { 
 
    if (event.keyCode == 13) { 
 
    event.preventDefault(); 
 
    var input = { 
 
     search: $(this).val() 
 
    }; 
 
    getWikiInfo(input); 
 
    } 
 
}); //search end 
 

 
function getWikiInfo(input) { 
 
    var wikipApi = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&callback=?"; 
 
    var getWikipHtml = function(response) { 
 
    var content = [0, 1, 2, 3, 4, 5].map(function(i) { 
 
     return $('<div class="list">') 
 
     .append($('<h3>').text(response[1][i])) 
 
     .append($('<p>').text(response[2][i])); 
 
    }); 
 

 
    $("#list-container").html(content); 
 
    } 
 
    $.getJSON(wikipApi, input, getWikipHtml); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id='search-word' type='text' /> 
 
<div id='list-container'></div>