下划线通过 id 获取嵌套项

Question

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

使用下划线或 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"
            }
         ]
      }
   ]
}

Answer 1

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

遍历所有categories
遍历每个 groups 数组
如果没有组数组，做一个临时数组：[{charts: cat.charts }]
遍历图表

使用 .some 或 .find 应该可以让您在第一个结果上 return。您可以更改代码以反映您喜欢的样式，但重要的是要意识到您只需要知道两件事即可获得结果：

如何遍历数组
如何 select 对象的属性

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 中的一些问题，查看有关如何执行此操作的示例。

Answer 2

您可以使用递归函数进行深度搜索并获得 return 想要的结果。

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'))

下划线通过 id 获取嵌套项

underscore get nested item by id

javascript

underscore.js

lodash