从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循环中使用全局变量。 我希望这能帮到您。