Question

我正在尝试实现Wikipedia Search API并将结果写入页面。（它们显示在控制台中。）

我已经尝试通过“ data.query.search.title”进行for循环。我尝试了“ JSON.stringify（data，null，2）”，但这不是我想要的。

这是一个JSFiddle：

'''function search(event) {

  event.preventDefault();

  var input = document.getElementById('searchInput'). value;
  var searchText = input.trim().toLowerCase();

var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=links&list=search&srsearch=" + searchText + "&srnamespace=0&srinfo=&srprop=snippet%7Ctitlesnippet&callback=?"
$.getJSON (url, function(data) {

var output = data.query.search;

display.innerHTML = output;
console.log(output);

})}

 '''

控制台显示多个对象。该页面显示[Object object]重复了多次。

我希望获得标题，摘要和URL。

希望我的帖子正确无误。预先感谢。

Answer 1

看到[Object object]的原因恰好是因为您试图将复杂的对象输出到屏幕上。显然，您需要输出其中的项目。您不能只转储整个对象，因为JavaScript不知道您希望它如何显示。

您代码中的

output是一个数组（我们可以从控制台日志中看到它）。因此，您需要遍历数组，并为每个条目打印所需的属性。结果中的对象似乎没有URL（如您所述），但是它们确实具有标题和摘录。

演示（我还对您的代码进行了一些重构以使其更整洁）：

$("#searchButton").click(function() {
  search($("#searchInput").val());
});

function search(searchText) {

  var searchText = searchText.trim().toLowerCase();

  var url = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=links&list=search&srsearch=" + searchText + "&srnamespace=0&srinfo=&srprop=snippet%7Ctitlesnippet&callback=?"
  $.getJSON(url, function(data) {

    var output = data.query.search;

    for (i = 0; i < output.length; i++) {
      display.innerHTML += "<li>" + output[i].title + " - " + output[i].snippet + "</li>";
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Wikipedia Search</h1>
<input type="search" id="searchInput">
<br>
<input type="button" id="searchButton" value="Search">
<br>
<ul id="display"></ul>

将Wikipedia API搜索结果写入页面

1 个答案: