Javascript 下划线按id获取嵌套项

我有以下数据结构，其中包含类别作为顶层，后面是可选组，然后是表示图形数据的图表对象

使用下划线或vanilla js，我希望通过id获得特定的图表对象。我尝试使用u.flatte和u.find的组合，但没有得到任何结果

如果还可以根据图表id获得类别中的图表数量，那将非常棒

 {
   "categories":[
      {
         "title":"category 1",
         "id":"cat1",
         "groups":[
            {
               "title":"group 1",
               "id":"grp1",
               "charts":[
                  {
                     "title":"chart 1",
                     "id":"chart1",
                     "type":"line"
                  }
               ]
            }
         ]
      },
      {
         "title":"category 2",
         "id":"cat2",
         "charts":[
            {
               "title":"chart 2",
               "id":"chart2",
               "type":"line"
            }
         ]
      },
      {
         "title":"category 3",
         "id":"cat3",
         "charts":[
            {
               "title":"chart 3",
               "id":"chart3",
               "type":"line"
            }
         ]
      }
   ]
}

---

可以创建嵌套循环来搜索数据树

• 循环浏览所有

  类别

• 循环遍历每个

  组

  数组
• 如果没有组数组，则创建一个临时数组：

  [{charts:cat.charts}]

• 循环浏览图表

使用

.some

或

.find

可以返回第一个结果。您可以更改代码以反映您喜欢的样式，但重要的是要意识到只有两件事您需要知道才能获得结果：

• 如何迭代数组
• 如何选择对象的属性

var数据={categories:[{title:“categority 1”，id:“cat1”，groups:[{title:“group1”，id:“grp1”，charts:[{{title:“chart1”，type:“line”}]}，{title:“categority 2”，id:“cat2”，type:“line”}，{title:“categority”，id:“cat3”，charts:[{title:“chart3”，id:“chart3”，type:“line”}]}}；
var结果；
data.categories.find(
cat=>（cat.groups | |[{charts:cat.charts}]）。查找(
group=>group.charts.find(
图表=>{
如果（chart.id==“chart3”）{
结果=图表；
返回true；
}
返回false；
})))
控制台日志（结果）您可以创建嵌套循环来搜索数据树


循环浏览所有
类别
循环遍历每个
组
数组
如果没有组数组，则创建一个临时数组：
[{charts:cat.charts}]
循环浏览图表

使用
.some
或
.find
可以返回第一个结果。您可以更改代码以反映您喜欢的样式，但重要的是要意识到只有两件事您需要知道才能获得结果：


如何迭代数组
如何选择对象的属性


var数据={categories:[{title:“categority 1”，id:“cat1”，groups:[{title:“group1”，id:“grp1”，charts:[{{title:“chart1”，type:“line”}]}，{title:“categority 2”，id:“cat2”，type:“line”}，{title:“categority”，id:“cat3”，charts:[{title:“chart3”，id:“chart3”，type:“line”}]}}；
var结果；
data.categories.find(
cat=>（cat.groups | |[{charts:cat.charts}]）。查找(
group=>group.charts.find(
图表=>{
如果（chart.id==“chart3”）{
结果=图表；
返回true；
}
返回false；
})))
控制台日志（结果）您可以使用递归函数进行深度搜索并返回所需结果


var obj={“categories”：[{“title”：“cat1”，“id”：“cat1”，“groups”：[{“title”：“group1”，“id”：“grp1”，“charts”：[{“title”：“chart1”，“type”：“line”}]}}，{“title”：“cat2”，“chart2”，“type”：“line”}}}，{“title”：“chart2”，“type”：“line”}}，{“categority”：“categority”：“cat3”，“charts”：“{“title”：“charts”：“id”：“chart3”，“id”：“chart3”，“type”：“行”}]}]}
函数findObj（数据，id）{
var结果=[]；
if（Array.isArray（数据））{
data.forEach（函数（e）{
结果=result.concat（findObj（e，id））
})
}else if（数据类型=='object'&&！Array.isArray（数据））{
var f=null；
Object.keys（数据）.forEach（函数（e）{
如果（e=='id'&&data[e]==id）f=data；
})
如果（f！=null）{
结果：推（f）；
}否则{
Object.keys（数据）.forEach（函数（键）{
if（数据类型[键]==“对象”）{
result=result.concat（findObj（数据[key]，id））；
}
})
}
}
返回结果；
}
console.log（findObj（obj，'grp1'））
log（findObj（obj，'chart1'））
log（findObj（obj，'cat1'））
您可以使用递归函数进行深入搜索并返回所需结果


var obj={“categories”：[{“title”：“cat1”，“id”：“cat1”，“groups”：[{“title”：“group1”，“id”：“grp1”，“charts”：[{“title”：“chart1”，“type”：“line”}]}，{“title”：“cat2”，“chart2”，“type”：“line”}}}，{“title”：“chart2”，“type”：“line”}}，{“cat3”，“charts”：“{“title”：“chart3”，“id”：“chart3”，“type”：行“}]}]}
函数findObj（数据，id）{
var结果=[]；
if（Array.isArray（数据））{
data.forEach（函数（e）{
结果=result.concat（findObj（e，id））
})
}else if（数据类型=='object'&&！Array.isArray（数据））{
var f=null；
Object.keys（数据）.forEach（函数（e）{
如果（e=='id'&&data[e]==id）f=data；
})
如果（f！=null）{
结果：推（f）；
}否则{
Object.keys（数据）.forEach（函数（键）{
if（数据类型[键]==“对象”）{
result=result.concat（findObj（数据[key]，id））；
}
})
}
}
返回结果；
}
console.log（findObj（obj，'grp1'））
log（findObj（obj，'chart1'））
console.log（findObj（obj，'cat1'））
谢谢，我现在来看看可能应该说这将在不支持es6的浏览器中使用。非常有趣的是，您可以替换箭头函数，如
function（cat）{return（cat.gr…etc
Array.prototype.find
已经存在一段时间了，您可以在这里查看它的支持情况：谢谢，不幸的是，我必须支持IE，但这是一个非常优雅的解决方案。谢谢，我现在来看看，可能应该说这将在不支持es6的浏览器中使用。非常有趣的想法您可以重复将箭头函数如
function（cat）{return（cat.gr…等
Array.prototype