ReactJS: Grouping Array of Objects Based on Title Regex Value [duplicate]

Question

I have an array of Objects that I am trying to group based on the title regex value.

Example array:

[
  {
    id: "1",
    title: "[GroupA] Example Title",
    date: "example date",
  },
  {
    id: "2",
    title: "[GroupA] Example Title",
    date: "example date",
  },
  {
    id: "3",
    title: "[GroupB] Example Title",
    date: "example date",
  },
  {
    id: "4",
    title: "[GroupC] Example Title",
    date: "example date",
  },
];

I am trying to group each object based on the title: "[Group]"

The following .replace() gives me the Group value

let titleValue = data.title.replace(/(^.*\[|\].*$)/g, "");

// result: GroupA, GroupA, GroupB, GroupC

How would I be able to group these object arrays under their titleValue

TIA

How do you want to group? It would be easy to answer if you could add result as a code also? — DecPK
– DecPK, Commented May 24, 2021 at 0:37
Do you want the result as an object that contain group name array as properties and then add them under that array? — DecPK
– DecPK, Commented May 24, 2021 at 0:38
hey @decpk correct that would be ideal. What are your thoughts? Apologies that I didn't include a desired output/result as I don't really know how to achieve it — yush
– yush, Commented May 24, 2021 at 0:40
@Drew. This is not exactly a Duplicate question. It would be better to reopen this. — DecPK
– DecPK, Commented May 24, 2021 at 0:42

Hao Wu · Accepted Answer · 2021-05-24 00:42:48Z

1

Assuming you want an object which has group names as the keys and an array of all the matching elements as the values:

const data = [
  {
    id: "1",
    title: "[GroupA] Example Title",
    date: "example date",
  },
  {
    id: "2",
    title: "[GroupA] Example Title",
    date: "example date",
  },
  {
    id: "3",
    title: "[GroupB] Example Title",
    date: "example date",
  },
  {
    id: "4",
    title: "[GroupC] Example Title",
    date: "example date",
  },
];


const groupedData = data.reduce((acc, cur) => {
  let titleValue = cur.title.replace(/(^.*\[|\].*$)/g, "");
  if(acc[titleValue]) {
    acc[titleValue].push(cur);
  } else {
    acc[titleValue] = [cur];
  }
  return acc;
}, {});


console.log(groupedData);

answered May 24, 2021 at 0:42

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

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

3 Comments

yush Over a year ago

Thats awesome, thank you kindly for your help

DecPK Over a year ago

You can create also a shorter version also (acc[titleValue] = acc[titleValue] ?? []).push(cur);

Hao Wu Over a year ago

@decpk Also (acc[titleValue] ??= []).push(cur); would be shorter. But I'd like to make it easier to understand and has better support :p

Collectives™ on Stack Overflow

ReactJS: Grouping Array of Objects Based on Title Regex Value [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related