如何按数据类型映射和分组数组数据

Question

我有一组数据正在拉入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 issues等下。

我已经得到了一份地图声明，我被一种解决问题的方法难住了——

returnFields = () =>{

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


}); 
}

有人能在这里提出一个好的解决方案吗？

Answer 1

我建议为输入数组创建一个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; }

Answer 2

您得到想要的结果了吗？

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