How can I map and group array data by datatype? [duplicate]

Question

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?

Please don't tag your titles, and use complete sentences with capitalization and question punctuation. — isherwood
– isherwood, Commented Mar 22, 2022 at 15:38

Terry Lennox · Accepted Answer · 2022-03-22 15:47:00Z

2

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; }

answered Mar 22, 2022 at 15:47

Terry Lennox

30.9k5 gold badges37 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andreas Over a year ago

And you haven't found a duplicate for the "how to group by..." question? One that gets asked multiple times a day?

고윤태 · Accepted Answer · 2022-03-22 15:32:11Z

1

Are you getting the results you want?

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

  return acc;
}, {});

answered Mar 22, 2022 at 15:32

고윤태

391 silver badge4 bronze badges

1 Comment

Lajos Arpad Over a year ago

A sample input/output example would be nice.

Collectives™ on Stack Overflow

How can I map and group array data by datatype? [duplicate]

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related