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>

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循环中使用全局变量。希望对您有帮助。

从json创建列表将返回[object Object]和最后一个li

2 个答案: