javascript - 从 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);
        });
      }
    });
  });
});

这是 fiddle

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>