javascript - 是否可以在不知道父对象的情况下访问对象的子对象？

Question

我有一个对象:

[
    {"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"}
    ]}
]

如何访问"TeamName"对于每个组而不指定父组(例如 "ML" )？

通常是ML.TeamName ，可以执行类似 x.TeamnName 的操作？

其原因是组名称是动态且不可预测的。

我基本上想遍历组(父组和其中设置的子组)。将其视为创建 <ul>对于每个组(以组名作为标题)和 <li> 中的 child 列表值为“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>

Answer 1

如果你的对象存储在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 进行简化 arrow functions :

data.Result.map(obj => {
    for(var i in obj) if(obj.hasOwnProperty(i))
        return obj[i].map(obj => obj.TeamName);
});

只需稍作修改，您就可以获得这些 html(注意它容易受到 html 注入(inject)的影响)

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;
    }
})