Question

当用户与搜索字段进行交互时，我试图将JSON文件中的数据提取到HTML页面上。

以下是指向我的JSON文件的链接：http://myjson.com/m0a3m

<input id="search" type="text" placeholder="Search term">
<div id="matches" style="height:70px; overflow-y:hidden; white-space:pre"></div>

$.getJSON( "https://api.myjson.com/bins/m0a3m", function( data ) {
  var items = [];
  var dataArr = {};

  $.each( data, function( key, val, ) {
    items.push( "<li id='" + key + "'><div class='c-name'>" + val.name + "</div><div class='c-address'>" + val.address.name + ', ' + val.address.line1 + ',' + val.address.town + ', ' + val.address.county + ', ' + val.address.postcode + "</div></li>" );
  });
  $( ".details").html("<ul>" + items + "</ul>");
});

当前，所有这些操作仅显示几行数据。可以通过一些真正的帮助将其链接到搜索栏。

关于我应该阅读的任何建议或提示都很棒！

谢谢

Answer 1

由于items是一个数组，并且$.html需要一个字符串–您需要join个项目数组才能输出字符串。

$(".details").html("<ul>" + items.join('') + "</ul>");

join（）方法通过串联创建并返回新字符串数组（或类似数组的对象）中的所有元素，分开通过逗号或指定的分隔符字符串。

Answer 2

您应该加入数组元素

$( ".details").html("<ul>" + items.join("") + "</ul>");

使用JSON和JQUERY返回数据

2 个答案: