Question

我正在尝试通过访问所有JSON键和值来comsume bill.json，不幸的是我没有收到错误消息所以我感到难过

请查看以下JSON

{
 "statement": {
"generated": "2015-01-11",
"due": "2015-01-25",
"period": {
  "from": "2015-01-26",
  "to": "2015-02-25"
    }
  },
  "total": 136.03,
  "package": {
  "subscriptions": [
  { "type": "tv", "name": "Variety with Movies HD", "cost": 50.00 },
  { "type": "talk", "name": "Sky Talk Anytime", "cost": 5.00 },
  { "type": "broadband", "name": "Fibre Unlimited", "cost": 16.40 }
],
"total": 71.40
},
"callCharges": {
"calls": [
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "07716393769", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 },
  { "called": "02074351359", "duration": "00:23:03", "cost": 2.13 }
],
"total": 59.64
},
"skyStore": {
"rentals": [
  { "title": "50 Shades of Grey", "cost": 4.99 }
],
"buyAndKeep": [
  { "title": "That's what she said", "cost": 9.99 },
  { "title": "Brokeback mountain", "cost": 9.99 }
],
"total": 24.97}}

以及以下HTML和JS代码

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JSON Sample</title>
</head>
<body>
    <div id="statementHdr"></div>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
    $(document).ready(function() {
        $.getJSON('bill.json', function(data) {
            data = JSON.parse(resultJSON);
            var statementHdr = "<ul>";
            for (key in data) {
                if (data.hasOwnProperty(key)) {
                    statementHdr += "<li>" + key + "---" + data[key] + "</li>";
                }
            }
            statementHdr += "</ul>";
        })
        document.getElementById("statementHdr").innerHTML = statementHdr;
    })
</script>
</body>
</html>

Answer 1

由于bill.json是一个json文件，因此您无需使用JSON.parse，您可以直接访问其值。使用下面的代码来理解它。同样，您不能直接显示data [key]，因为某些值还包含另一个数据数组，因此您需要将它们分开显示。如果显示它们，将得到[object Object]。因此，您需要指出他们的密钥，或者需要在该数组中再次对其进行迭代以获取这些信息。

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JSON Sample</title>
</head>
<body>
    <div id="statementHdr"></div>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
    $(document).ready(function() {
        $.getJSON('bill.json', function(data) {
            var statementHdr = "<ul>";
            $.each(data, function (key, value) {
                statementHdr += "<li>" + key + " --- " + value + "</li>";
            });
            statementHdr += "</ul>";

            $("#statementHdr").html(statementHdr);
        });
    });
</script>
</body>
</html>

Answer 2

您的代码中有一些小问题。我已经修复了它们，以便您可以学习每个部分，但是可以做一些我将列出的改进之外的改进，以提高代码的可读性和可靠性。

第一步是，当您使用$.getJSON加载json时，不需要JSON.parse。同样在同一部分，使用了未实例化的resultJSON变量。

第二个步骤是您的HTML插入位于$ .getSON回调之外，在这种情况下，您只需要移动document.getElementById("statementHdr").innerHTML = statementHdr;调用，甚至用{{1 }} jQuery方法。

第三步是，即使在进行了此更改之后，您的代码也会显示一些$("#statementHdr").append(statementHdr);，因为有时使用[object object]时，它实际上是一个嵌套JSON对象。在这种情况下，您可以导航到嵌套对象中，或者仅使用data[key]来显示内容。

下面的代码已经更改为可以工作：

JSON.stringify

尝试访问嵌套JSON文件的键和值

2 个答案: