下划线通过ID获取嵌套的项目

Question

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

使用下划线或香草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

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

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

Answer 2

您可以创建一个嵌套循环来搜索您的数据树。通过图表[{charts: cat.charts }]

环路

使用.some：

• 遍历所有categories
• 循环每一个groups阵列
• 如果没有一组阵列，使一个临时或.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);

  如果你打算做了很多像这样的搜索结果，可以CRE吃了一个Map或散列对象，该对象按id键存储项目数组。查看javascriptarrays中的一些问题，查看有关如何执行此操作的示例。