我有以下数据结构,其中包含作为顶级的类别,后跟可选组,然后是表示图形数据的图表对象。
使用下划线或vanilla js我希望通过其id获取特定的图表对象。我已经尝试过使用_.flatten和_.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"
}
]
}
]
}
答案 0 :(得分:1)
您可以创建嵌套循环来搜索数据树。
categories
groups
数组[{charts: cat.charts }]
使用.some
或.find
可以让您返回第一个结果。您可以更改代码以反映您喜欢的样式,但重要的是要意识到只需要知道两件事就可以获得结果:
var data={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"}]}]};
var result;
data.categories.find(
cat => (cat.groups || [{ charts: cat.charts }]).find(
group => group.charts.find(
chart => {
if (chart.id === "chart3") {
result = chart;
return true;
}
return false;
})))
console.log(result);
如果您计划进行大量此类搜索,则可以创建Map
或哈希对象,以id
键存储项目数组。查看javascript arrays中的一些问题,了解如何执行此操作的示例。
答案 1 :(得分:1)
您可以使用递归函数进行深度搜索并返回所需的结果。
var a = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }],
b = [{ id: 1 }, { id: 2 }, { id: 3 }],
hash = Object.create(null);
b.forEach(function (item) {
hash[item.id] = true;
});
a = a.filter(function (item) {
return hash[item.id];
});
console.log(a);