json数据没有显示[重复]

Question

这个问题在这里已有答案：

• How can I access and process nested objects, arrays or JSON? 21个答案

我有一个json文件，我试图使用以下jquery函数访问。

$.ajax({
    type: 'GET',
    url: '/data/coffee.json',
    dataType:'json',
    success: function(data) {
        let widget = show(data);
        $("#Meals").html(widget);
    }
});

function show(data) {
    let statusHtml = '<ul>';
    $.each(data.prices, function(i, meal){
        statusHtml += '<li> name: '+ meal.item + '</li>';
        statusHtml += '<li> price: '+ meal.price + '</li>';
    });
    statusHtml += '</ul>';
    return statusHtml;
}

我试图访问的数据如下：

[
  {
    "shopName": "The Coffee Connection",
    "address": "123 Lakeside Way",
    "phone": "16503600708",
    "prices": [
  {
   "item": "Cafe Latte",
   "price": 4.75
  },
  {
   "item": "Flat White",
   "price": 4.75
  },
  {
   "item": "Cappucino",
   "price": 3.85
  },
  {
   "item": "Single Espresso",
   "price": 2.05
  },
  {
   "item": "Double Espresso",
   "price": 3.75
  },
  {
   "item": "Americano",
   "price": 3.75
  }
  ]
 }
]

我试过console.log（'成功'，数据）;这将返回控制台中的价格数组。但由于某些原因，当我运行此代码时它并没有显示出来。任何帮助，将不胜感激。

Answer 1

data.prices无效。 data是一个数组，所以你需要data[0].prices等，首先循环通过data，并且该变量将具有价格属性。或者只是使用

function show(data) {
    let statusHtml = '<ul>';
    $.each(data[0].prices, function(i, meal){
        statusHtml += '<li> name: '+ meal.item + '</li>';
        statusHtml += '<li> price: '+ meal.price + '</li>';
    });
    statusHtml += '</ul>';
    return statusHtml;
}

Answer 2

数据是Array，这应该工作：

$.each(data[0].prices, function(i, meal){
    statusHtml += '<li> name: '+ meal.item + '</li>';
    statusHtml += '<li> price: '+ meal.price + '</li>';
});