使用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>