如何按資料型別映射和分組陣列資料？-有解無憂

我有一組資料要拉入 React 應用程式 -

const knowledgeData = [
  {
    id: 'connect',
    catTitle: 'Connectivity',
    subTitle:'Very Slow - Loader Stays on',
    subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'

  },
  {
    id: '`cms`',
    catTitle: 'CMS ISSUES',
    subTitle:'UNABLE TO LOG IN',
    subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'

  },
  {
    id: '`cms`',
    catTitle: 'CMS ISSUES',
    subTitle:'UNABLE TO PRINT REPORT',
    subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'

  },
  {
    id: '`cms`',
    catTitle: 'CMS ISSUES',
    subTitle:'Unable To Covert a PDF',
    subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'

  },
  {
    id: 'app',
    catTitle: 'Staff App Issues',
    subTitle:'Unable to access photos',
    subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'

  },
];

資料用于員工 wiki - 我需要以分組排列方式顯示資料 - 按 ID 分組，因為每個資料組在設計中被分隔到自己的網格中 - 例如，所有與 CMS 相關的問題都歸類在標題 CMS 下問題等

就地圖宣告而言，我已經掌握了解決問題的方法 -

returnFields = () =>{
  
    this.state.knowledgeData.map((data,i) => {
     //for each datatype:(
        //return(
          //HTML containing mapped data here with group title wrap

          
     
    }); 
}

誰能在這里提出一個好的解決方案？

uj5u.com熱心網友回復：

我建議groupBy()為您的輸入陣列創建一個函式，然后您可以按所需的屬性進行分組。

groupBy 函式用于Array.reduce()創建一個分組物件，其中每個 id 值都有一個物件陣列，在這種情況下connect，cms和app：

const knowledgeData = [ { id: 'connect', catTitle: 'Connectivity', subTitle:'Very Slow - Loader Stays on', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'  }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'UNABLE TO LOG IN', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'  }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'UNABLE TO PRINT REPORT', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'  }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'Unable To Covert a PDF', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'  }, { id: 'app', catTitle: 'Staff App Issues', subTitle:'Unable to access photos', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>'  }, ];

function groupBy(input, key) {
    return input.reduce((acc, el) => { 
        acc[el[key]] = acc[el[key]] || [];
        acc[el[key]].push(el);
        return acc;
    }, {});
}

const grouped = groupBy(knowledgeData, 'id');

console.log('Result:');
for(let key in grouped) {
    console.log('Group:', key);
    console.log(grouped[key]);
}

.as-console-wrapper { max-height: 100% !important; }

uj5u.com熱心網友回復：

你得到你想要的結果了嗎？

const result = knowledgeData.reduce((acc, cur) => {
  acc[cur.id] = [...(acc[cur.id] || []), cur];

  return acc;
}, {});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/446734.html

標籤：javascript 反应 ecmascript-6

上一篇：添加子元素時如何增加元素的高度？

下一篇：在Typescript中組合物件陣列中的物件？