是否有可能在不知道父对象的情况下访问对象的子对象?
Is it possible to access children of an object w/out knowing the parent?
我有一个对象:
[
{"ML":[
{"TeamName":"Team 1","League":"League 1"},
{"TeamName":"Team 2","League":"League 2"},
{"TeamName":"Team 3","League":"League 3"}
]},
{"3A":[
{"TeamName":"Team 4","League":"League 1"},
{"TeamName":"Team 5","League":"League 2"},
{"TeamName":"Team 6","League":"League 3"}
]},
{"2A":[
{"TeamName":"Team 7","League":"League 1"},
{"TeamName":"Team 8","League":"League 2"},
{"TeamName":"Team 9","League":"League 3"}
]}
]
如何在不指定父组(例如"ML"
)的情况下访问每个组的"TeamName"
?
正常情况下,它是ML.TeamName
,有可能做一些像x.TeamnName
吗?
这样做的原因是组名是动态的和不可预测的。
我基本上想遍历组(父组/子组设置在其中)。可以把它想象成为每个组创建一个<ul>
(以组名作为标题)和<li>
中值为"TeamName"的子列表。
我正在使用jQuery,想要这样的结果:
<h4>ML</h4>
<ul>
<li>Team 1</li>
<li>Team 2</li>
<li>Team 3</li>
</ul>
<h4>3A</h4>
<ul>
<li>Team 4</li>
<li>Team 5</li>
<li>Team 6</li>
</ul>
<h4>2A</h4>
<ul>
<li>Team 7</li>
<li>Team 8</li>
<li>Team 9</li>
</ul>
如果您的对象存储在data
中,则可以使用ES5 map
:
data.Result.map(function(obj){
for(var i in obj) if(obj.hasOwnProperty(i))
return obj[i].map(function(obj){
return obj.TeamName
});
});
或者使用ES6箭头函数简化:
data.Result.map(obj => {
for(var i in obj) if(obj.hasOwnProperty(i))
return obj[i].map(obj => obj.TeamName);
});
稍加修改,你就可以得到这些html(注意它很容易被html注入)
wrapper.innerHTML += data.Result.map(obj => {
for(var i in obj) if(obj.hasOwnProperty(i))
return '<h4>'+i+'</h4>'n'
+ obj[i].map(obj => ''t<li>'+obj.TeamName+'</li>'n').join('');
}).join('');
这种方式不容易受到攻击:
data.Result.forEach(obj => {
for(var i in obj) if(obj.hasOwnProperty(i)) {
var h4 = document.createElement('h4'),
ul=document.createElement('ul');
h4.appendChild(document.createTextNode(i));
wrapper.appendChild(h4);
obj[i].forEach(obj => {
var li = document.createElement('li');
li.appendChild(document.createTextNode(obj.TeamName));
ul.appendChild(li);
});
wrapper.appendChild(ul);
return;
}
})
使用括号符号:
Result["ML"].TeamName
如果你想知道列表中的所有内容
var result = JSON.parse(...);
for (var i = 0; i < result.Result.length; i++) {
console.log(result.Result[i])
}
假设目标是消除额外级别并使团队扁平化,请考虑以下内容(fiddle)。它使用了基本的循环,但希望展示了解构过程。
var results = json.Result;
var teams = [];
for (var i = 0; i < results.length; i++) {
var conf = results[i];
// conf will be like {ML: ..}
for (var p in conf) {
// Enumerate properties, p is "ML", etc. In the given JSON there
// will only be one property to enumerate.
if (conf.hasOwnProperty(p)) {
var confTeams = conf[p];
// confTeams is like [{TeamName:..},..]
teams = teams.concat(confTeams)
}
}
};
现在teams
包含如下转换数据:
[ {"TeamName":"Team 1","League":"League 1"},
{"TeamName":"Team 2","League":"League 2"},
.. ]
如果您使用lodash或underscore等库
如果你不需要知道原始密钥…
var list = _.reduce(j.Result,function(c,v,i,l){
return c.concat(_.values(v)[0]);
},[])
如果你想索引对象内部的原始键…
var list = _.reduce(j.Result,function(c,v,i,l){
return c.concat(_.map(_.values(v)[0],function(vv,ii){
vv.key = _.keys(v)[0]
return vv; // change each object here
}));
},[]);
console.log(list)
JSBIN
相关文章:
- 在不知道深度或父属性的情况下从对象中删除属性
- 如何在不使用 new 关键字的情况下从函数创建对象
- 如何在不知道关键字的情况下访问javascript对象值
- 在不使用循环的情况下,从一个数据库字符串值向javascript数组添加多个对象
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器
- 是否可以在不重新渲染的情况下显示/隐藏父对象中的元素
- 在禁用ng的情况下搜索JSON对象(AngularJS)
- 如何在不安装npm的情况下一次性扩展对象
- 是否可以在不创建svg对象的情况下创建捕捉元素?[snap.svg]
- 是否可以在不序列化的情况下将对象从SilverLight传递到JavaScript
- 在知道对象值的情况下,确定数组中JS对象的索引
- 在不重构Mongo数据库的情况下,更新嵌入数组中的具有给定ID的对象
- 如何避免在这种情况下修改事件对象
- handontable:在不更改数据数组/对象的情况下隐藏某些列
- 是否可以在不加对象名称前缀的情况下调用对象的函数
- 在不使用object.Create的情况下创建具有null原型的javascript对象
- 我可以在不使用XMLHttpRequest或文档对象的情况下使用Javascript来获取网页吗
- 如何在不选择模式配置参数的情况下,使用mongoose在MongoDB模式实例化中的关联数组/对象中执行foreach
- 如何在不破坏shouldComponentUpdate的情况下传递对象/子对象作为道具
- 在不使用jQuery的情况下连接两个JSON对象