從json創建列表將返回[object Object]和最后一個li

Question

我正在學習如何使用JSON響應。 我希望它顯示json中的所有6個項目。 為什么只得到最后一個項目和之前的[object Object] ？

 $(document).ready(function() { $(function() { $.ajax({ type: 'GET', url: 'https://api.myjson.com/bins/e4ei2', async: false, dataType: 'json', success: function(result) { var item = ""; $.each(result, function(index, val) { for (var i = 0; i < val.length; i++) { var item = val[i]; console.log(item.stand); console.log(item.dishName); console.log(item.dishPrice); item += " <li><div class='content'><div class='stand-wrapper'><h2 class='stand'>" + item.stand + "</h2></div><div class='dish-wrapper'><p class='dish'>" + item.dishName + "</p></div><div class='price-wrapper'><p class='price'>" + item.dishPrice + "</p></div></div></li>"; } $('ul').html(item); }); } }); }); }); 

這是小提琴

Answer 1

首先，刪除async: false設置。 這是非常糟糕的做法，而且由於正確使用了回調，因此您也不需要它。

然后，您需要遍歷result.menu而不是result 。 您還要在循環的每次迭代中重新聲明item 。 您將其設置為等於val[i] ，它是一個對象。 然后，當您嘗試將其連接為字符串時，它會被強制轉換為[object Object] ，然后您會在輸出中看到它。

更好的方法是使menu具有單個循環。 然后，您可以在創建HTML字符串時直接訪問其屬性。 您可以使用map()實現此目的：

 var result = { "menu": [{ "stand": "Boucherie", "dishName": "Faux-filet", "dishPrice": "3,45 €" }, { "stand": "Pâtisserie", "dishName": "Mille feuilles", "dishPrice": "1,10 €" }, { "stand": "Le poissonier", "dishName": "Filet de bar au citron", "dishPrice": "4,60 €" }, { "stand": "Salad bar", "dishName": "Divers crudités" }, { "stand": "Les Côcottes", "dishName": "Rougail saucisse", "dishPrice": "2,80 €" }, { "stand": "Snack", "dishName": "Hot-dog", "dishPrice": "1,89 €" }] }; // in your AJAX handler: var html = result.menu.map(function(val) { return '<li><div class="content"><div class="stand-wrapper"><h2 class="stand">' + val.stand + '</h2></div><div class="dish-wrapper"><p class="dish">' + val.dishName + '</p></div><div class="price-wrapper"><p class="price">' + val.dishPrice + '</p></div></div></li>'; }); $('ul').html(html); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul></ul> 

Answer 2

 $(document).ready(function(){ $.ajax({ type : 'GET', url : 'https://api.myjson.com/bins/e4ei2', async : false, dataType : 'json', success : function(result){ var item=""; $.each(result, function(index, val){ for(var i=0; i < val.length; i++){ var data = val[i]; /* console.log(data.stand); console.log(data.dishName); console.log(data.dishPrice); */ item+=" <li><div class='content'><div class='stand-wrapper'><h2 class='stand'>"+data.stand+"</h2></div><div class='dish-wrapper'><p class='dish'>"+data.dishName+"</p></div><div class='price-wrapper'><p class='price'>"+data.dishPrice+"</p></div></div></li>"; } $('ul').html(item); }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="wrapper"> <div id="logo-wrapper"> </div> <ul> </ul> </div> 

請檢查一下。 您正在for循環中使用全局變量。 我希望這能幫到您。