訪問JSON數組元素

動態的方式

data = '[{"beatles": [ 
       {"name":"Paul McCartney","value": "http://www.paulmccartney.com"}, 
       {"name": "John Lennon","value": "http://www.johnlennon.it"}, 
       {"name":"George Harrison","value": "http://www.georgeharrison.com"}, 
       {"name": "Ringo Starr","value": "http://www.ringostarr.com"}], 
      "stones": [ 
       {"name": "Mick Jagger","value": "http://www.mickjagger.com"}, 
       {"name": "Keith Richards","value": "http://www.keithrichards.com"}]'

和我有兩個下拉列表

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
      <title></title> 
      <script src="rockbands.json"></script> 
      <script src="script.js"></script> 
    </head> 
    <body onload="getBands()"> 
      <select id="bands" onchange="getNames(this.value)"></select> 
      <select id="names" ></select> 

    </body> 
</html>

所以我加載具有ID「帶」的下拉列表與此JS代碼

function getBands() { 
    var root = JSON.parse(data) 
    var bandsBox = document.getElementById("bands") 
    for(i in root[0]) { 
     var option = document.createElement("option") 
     option.text = i 
     bandsBox.appendChild(option) 
    } 
}

我想要做的是填充ID爲「名稱」的其他下拉列表與數組elem基於在第一個下拉列表中的選擇，例如，如果我選擇了披頭士它將加載所有名稱披頭士012「一個動態的方式來訪問他們的感謝

來源

2016-01-07 Willy

那不是一個JSON數組，它是一個字符串。 – Craicerjack

啊對不起，json字符串多數民衆贊成我的意思是 – Willy

看到這個 - https://jsfiddle.net/abhitalks/05ejeunh/ – Abhitalks

基於this document：

屬性訪問提供使用點符號或括號符號訪問對象的屬性。

object.property 
object["property"]

這意味着你可以像root[0]['beatles'][1]['name']訪問性能以及。

而且，由於「甲殼蟲」是像個屬性的字符串，它可以是一個變量太多：

root[0][band_name][1]['name']

來源

2016-01-07 13:55:43 Rahman

在getNames()功能做類似

function getNames(nameOfBand) { 
    var root = JSON.parse(data); 
    var namesBox = document.getElementById("names"); 
    var listOfNames = root[0][nameOfBand] 
    for(j = 0; j < listOfNames.length; j++) { 
     var option = document.createElement("option"); 
     option.text = listOfNames[j]["name"]; 
     namesBox.appendChild(option) 
    } 
}

來源

2016-01-07 13:58:58 Craicerjack

謝謝你！這工作 – Willy

歡迎，很高興提供幫助 – Craicerjack

訪問JSON數組元素

回答

相關問題