下劃線通過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中的一些問題，查看有關如何執行此操作的示例。