使用jQuery訪問多維JSON數組中的值

Question

我想從JSON文件中獲取值並插入到html中。

基於這個JSON數組我試圖拉使用jQuery數據插入到HTML標籤和創建網頁上：

$.getJSON("/general.json", function(data) { 

var jarray = data; 
for(i = 0; i <=jarray.length; i++){ 
    var project = jarray[i].project; 
    var fulltime = jarray[i].bars.fulltime.resource; 
    var contractor = jarray[i].bars.contractor.resource; 
    var vendor = jarray[i].bars.vendor.resource; 
    var capacity = jarray[i].bars.contractor.resource; 
    var dept = jarray[i].department; 

    jarray.push('<div class = "projects" >'); 
    jarray.push('<div class = "project" >'); 
    jarray.push('<div class = "label" >"'+ project+'"</div>'); 
    jarray.push('<div class = "progress" >'); 
    jarray.push('<span class = "'+ fulltime +'" ></span>'); 
    jarray.push('<span class = "'+ contractor +'" ></span>'); 
    jarray.push('<span class = "'+ vendor +'" ></span>'); 
    jarray.push('<span class = "'+ capacity +'" ></span>'); 
    jarray.push('</div>'); 
    jarray.push('</div>'); 
    jarray.push('</div>'); 

} 

    $('.projects').html(jarray.join('')).appendTo(".department_other > h2"); 

}）; ，但因爲陣列是複雜的不能訪問所需的值。將不勝感激任何建議，謝謝。

Answer 1

首先：命名您的JSON孩子和父親，我已更正您的JSON，但我會給您一個提示使用此站點http://json.parser.online.fr/來操縱JSON，看看它是如何。

二：像你{"0":{}}，{"1":{}}等做了千萬不要用孩子的名字爲數字。請務必使用一個名稱，或者不使用任何東西，像我一樣，這樣你就可以直接訪問，否則你不能。

第三：準確地說，首先想想你想要什麼，並在創建JSON之前將其分組，分組。

var j = { 
      "jsonArray":[ 
       { 
         "project": "x2 Mobile", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 2 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 1 
          } 
         }, 
         "project": "x2 PC/Web", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 1 
          } 
         }, 
         "project": "x2 Global/STB", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 11 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 3 
          } 
         }, 
         "project": "x3 Mobile/Apps", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 2 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 2 
          } 
         }, 

        "department": "Herrin" 
       }, 
       { 
         "project": "App Icon Strategy", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          } 
         }, 
        "department": "Herrin/Other" 
       }, 
       { 
         "project": "Packaging", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          } 
         }, 
         "project": "Customer Journey", 
         "bars": { 
          "fulltime": { 
           "resource": "progress-bar red", 
           "amount": 1 
          }, 
          "contractor": { 
           "resource": "progress-bar blue", 
           "amount": 1 
          }, 
          "vendor": { 
           "resource": "progress-bar green", 
           "amount": 5 
          } 
         }, 
        "department": "Other" 
       } 
      ] 
}; 

現在，您可以通過訪問它（例如，假設i=0）：

for(i=0;i<5;i++){ 
    var project = j.jsonArray[i].project; 
    var fulltime = j.jsonArray[i].bars.fulltime; 
    var resource = j.jsonArray[i].bars.contractor.resource; 
} 

Answer 2

例如，您可以在循環中訪問它們，例如val.bars.fulltime.resource或data[ i ].bars.fulltime.resource。

Answer 3

使用下劃線（http://underscorejs.org/）或lodash（http://lodash.com/）結帳。您可以使用uderscore的.pluck方法輕鬆獲取JSON對象中的元素...