javascript - $.getJSON 返回 undefined 然后返回请求的数据

Question

我陷入了困境。我正在为个人实践项目编写维基百科搜索工具，但遇到了一个小错误。当用户在搜索栏中输入一个词时，输入将被存储到$.getJSON的数据参数中，然后响应将返回一个基于输入词的标题和描述对象的数组搜索栏。 $.getJSON 函数将在指定的HTML 中以列表格式显示5 组标题及其描述。很简单，但问题是 $.getJSON 函数将显示措辞 “undefined”，然后继续显示所需的标题和描述集。下面我列出了我的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

您需要做一些小改动。将 wikipHtml 初始化为空字符串并检查 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>';
}