访问json数组元素的动态方式
dynamic way to access json array elements
所以我有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>
所以我用这个JS代码加载ID为"bands"的下载列表
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"name"填充另一个下拉列表数组元素"name"基于第一个下拉列表中的选择,例如,如果我选择beatles,它将加载beatles 中的所有名称
我可以用root[0].beatles[1].name之类的东西访问它,但我想要一种动态的方式来访问它们,这要归功于
在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)
}
}
基于此文档:
属性访问器通过使用提供对对象属性的访问点表示法或括号表示法。
object.property
object["property"]
这意味着您也可以访问root[0]['beatles'][1]['name']
等属性。
由于"beatles"是一个类似属性的字符串,它也可以是一个变量:
root[0][band_name][1]['name']
相关文章:
- 您有更好的动态方式来缩短复杂的代码jquery吗
- 用DRY方式Javascript/JQuery动态替换HTML
- 使用AJAX在Rails中提交动态表单的最佳方式是什么
- 限制与AngularJS状态匹配的动态URL参数的最佳方式
- 使用ui路由器实现动态URL路由的最佳方式是什么
- 在php生成的页面上获取勾选复选框列表的动态方式
- 动态网页的快捷方式
- 实现动态表单验证 Rails 的最佳方式
- 最简单的实现方式是网页上的动态更新表(java/css)
- 以动态方式访问动态创建的变量
- 在循环或以其他方式动态创建 JSON 对象中的属性
- 在 AngularJS 中设置具有动态路由和模板的 12 个产品页面的最佳方式
- 以编程方式将 JavaScript 添加到具有相同 id 的动态生成的超链接中
- 访问json数组元素的动态方式
- 设置“动态输入”字段的角度方式
- 将多个动态关键字名称附加到javascript对象的快捷方式
- 如何将模板中的动态表传递到视图中,以迭代方式将它们保存到数据库中
- 使用jQuery动态更新表字段的首选方式
- 创建基于时间的动态事件(如建筑施工时间等)的最佳方式是什么
- 解除绑定动态绑定的XBL的动态方式