是否有可能在不知道父对象的情况下访问对象的子对象?

Is it possible to access children of an object w/out knowing the parent?

本文关键字：对象 情况下 访问 是否 不知道 有可能      更新时间：2023-09-26

我有一个对象:

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

相关文章：