使用JSON和JQUERY返回數據

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需要一個字符串，因此，您需要連接項目數組以輸出字符串。

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

join（）方法通過連接數組（或類似數組的對象）中的所有元素（以逗號或指定的分隔符字符串分隔）來創建並返回新字符串。

Answer 2

您應該加入數組元素

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