未在无序列表中显示json解析数据

Question

我有以下json文件，我想作为列表显示。

[
{
"shopName": "The Coffee Connection",
"address": "123 Lakeside Way",
"phone": "16503600708",
"prices": [
  {
    "Cafe Latte": 4.75,
    "Flat White": 4.75,
    "Cappucino": 3.85,
    "Single Espresso": 2.05,
    "Double Espresso": 3.75,
    "Americano": 3.75,
    "Cortado": 4.55,
    "Tea": 3.65,
    "Choc Mudcake": 6.40,
    "Choc Mousse": 8.20,
    "Affogato": 14.80,
    "Tiramisu": 11.40,
    "Blueberry Muffin": 4.05,
    "Chocolate Chip Muffin": 4.05,
    "Muffin Of The Day": 4.55
    }
  ]
 }
]

我想迭代价格并在listView中显示它们。我正在使用以下Ajax函数和函数来提取此数据。不幸的是，当我运行我的代码时，我有一个空列表。

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

});

而我的另一个功能是。

$.ajax({
type: 'GET',
url: '/data/hipstercoffee.json',
dataType:'json',
success: function(data) {
  var data = JSON.parse(data)[0];
  // console.log('success', data);
  let widget = show(data);
  $("#Meals").html(widget);
 }

});

我在JSON的第1位错误时遇到了意想不到的问题。

Answer 1

你的prices是一个包含单个元素（对象）的数组。所以你需要处理这个对象。像这样的东西。

var data = [{
  "shopName": "The Coffee Connection",
  "address": "123 Lakeside Way",
  "phone": "16503600708",
  "prices": [{
    "Cafe Latte": 4.75,
    "Flat White": 4.75,
    "Cappucino": 3.85,
    "Single Espresso": 2.05,
    "Double Espresso": 3.75,
    "Americano": 3.75,
    "Cortado": 4.55,
    "Tea": 3.65,
    "Choc Mudcake": 6.40,
    "Choc Mousse": 8.20,
    "Affogato": 14.80,
    "Tiramisu": 11.40,
    "Blueberry Muffin": 4.05,
    "Chocolate Chip Muffin": 4.05,
    "Muffin Of The Day": 4.55
  }]
}];

function show(data) {
  var ul = '<ul>' +
    Object.keys(data[0].prices[0]).map(function(key) {
      return '<li>' + key + ': ' + data[0].prices[0][key] + '</li>';
    }).join('') +
    '</ul>';
  $('#result').html(ul);
}
show(data); //for demonstration purpose

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

<div id="result">loading...</div>

Answer 2

JSON是一个字符串。你必须先解码它才能把它变成一个javascript对象。另请注意，array []包裹在实际数据对象周围。

var data = JSON.parse(data)[0];

提示：检索数据时，请始终先在成功消息中输出数据（console.log（data）），以查看数据的结构。你会以这种方式更快地发现像阵列这样的东西。代码运行后，删除输出。