使用JQuery访问嵌套的JSON对象

Question

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

JSON对象如下：

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

这里是JQuery的在我的HTML文件：

$(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; 
    ... 
} 

Runnable接口下面的例子。

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); 
 
});

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