下划线按id获取嵌套项

underscore get nested item by id

本文关键字：嵌套 获取 id 下划线      更新时间：2023-09-26

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

使用下划线，或香草js我想通过它的id获得一个特定的图表对象。我试过使用_的组合。压扁和_。

如果可以根据图表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"
            }
         ]
      }
   ]
}

您可以使用递归函数进行深度搜索并返回所需的结果。

var obj = {"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"}]}]}
function findObj(data, id) {
  var result = [];
  if (Array.isArray(data)) {
    data.forEach(function(e) {
      result = result.concat(findObj(e, id))
    })
  } else if (typeof data == 'object' && !Array.isArray(data)) {
    var f = null;
    Object.keys(data).forEach(function(e) {
      if (e == 'id' && data[e] == id) f = data;
    })
    if (f != null) {
      result.push(f);
    } else {
      Object.keys(data).forEach(function(key) {
        if (typeof data[key] == 'object') {
          result = result.concat(findObj(data[key], id));
        }
      })
    }
  }
  return result;
}
console.log(findObj(obj, 'grp1'))
console.log(findObj(obj, 'chart1'))
console.log(findObj(obj, 'cat1'))

您可以创建一个嵌套循环来搜索数据树。

  • 遍历所有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键的项目数组。查看javascriptarrays中的一些问题，看看如何做到这一点的示例。

相关文章：