访问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数组元素

回答

相关问题