Question

我对这个问题犹豫不决，因为它已被问过很多次了，但我还没弄明白。我认为我想要在我的html文件中显示一个非常简单的嵌套JSON对象。

JSON对象如下：

{
    "data": {
        "listItem1": {
            "listName": "Goggles",
            "listType": "Face"
        },
        "listItem2": {
            "listName": "Gloves",
            "listType": "Hands"
        }
    }
}

这是我的html文件中的JQuery：

$(document).ready(function(){
    $.getJSON('equipLists.json', processList); 
    function processList(data) {
        var infoHTML ="";

        $.each(data,function(listItem, listInfo) {
            infoHTML += "<p>" + listInfo.listName + "</p><br>";
        });
        $('#ppeList').html(infoHTML);
    }
});

#ppeList只是我的html文件中的div容器。我知道这很简单，但我不能为我的生活弄清楚。谢谢你的帮助。

Answer 1

关于你如何对待JS对象存在一个小问题。请记住，在顶层，您的对象只有一个属性：data。如果您想引用该级别以下的任何内容，则必须通过说出obj.data或obj["data"]来引用它。另外，次要注释<p>元素是块元素，因此不需要换行符。

在你的情况下，你必须在回调函数中管理它（我的下面的示例是内联的，以避免AJAX调用）：

$.getJSON('equipLists.json', processList); 
function processList(obj) {
    var data = obj.data;
    ...
}

下面的可运行示例。

＆＃13;

var obj = {
  "data": {
    "listItem1": {
      "listName": "Goggles",
      "listType": "Face"
    },
    "listItem2": {
      "listName": "Gloves",
      "listType": "Hands"
    }
  }
};

function processList(data) {
  var infoHTML = "";

  $.each(data, function(listItem, listInfo) {
    infoHTML += "<p>" + listInfo.listName + "</p>";
  });

  $('#ppeList').html(infoHTML);
}

$(function() {
  processList(obj.data);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ppeList"></div>

＆＃13;

使用JQuery访问嵌套的JSON对象

1 个答案: