I have an array of data I'm pulling into a React application -
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></>'
},
];
The data is used for a staff wiki - I need to display the data in a grouped arrangement - grouped by ID as each data group is separated in the design into its own grid - so for example all CMS related issues are grouped under the title CMS ISSUES etc.
I've got as far as a map statement and I'm stumped with an approach to solve the issue -
returnFields = () =>{
this.state.knowledgeData.map((data,i) => {
//for each datatype:(
//return(
//HTML containing mapped data here with group title wrap
});
}
Can anyone please suggest a good solution here?
I'd suggest creating a groupBy() function for your input array, you can then group by the desired property.
The groupBy function uses Array.reduce() to create a grouped object with an array of objects at each id value, in this case connect, cms and 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; }Are you getting the results you want?
const result = knowledgeData.reduce((acc, cur) => {
acc[cur.id] = [...(acc[cur.id] || []), cur];
return acc;
}, {});