How do I group objects by key and modify the array the reduce function returns?

Question

I use Redux to store all my products in a list. Displayed thist list looks like:

[
  {
    "id": 1,
    "name": "BLACK TEA",
    "supplieruuid": "SLIGRO",
  },
  {
    "id": 2,
    "name": "GREEN TEA",
    "supplieruuid": "SLIGRO",
  },
  {
    "id": 3,
    "name": "PURPLE TEA",
    "supplieruuid": "BUNZL",
  },
  {
    "id": 4,
    "name": "RAINBOW TEA",
    "supplieruuid": "BUNZL",
  },
]

I'm using this reduce function to group these products together by key supplieruuid.

export const selectSortedItems = (state) => state.entities.cart.list.reduce((hash, { ["supplieruuid"]: value, ...rest }) => ({ ...hash, [value]: (hash[value] || []).concat({ ...rest }) }), {});

This returns this array of the products grouped by the key supplieruuid.

[
    {
        "SLIGRO": [
        {
            "id": 1,
            "name": "BLACK TEA",
            "supplieruuid": "SLIGRO",
        },
        {
            "id": 2,
            "name": "GREEN TEA",
            "supplieruuid": "SLIGRO",
        },
        ],
        "BUNZL": [
        {
            "id": 3,
            "name": "PURPLE TEA",
            "supplieruuid": "BUNZL",
        },
        {
            "id": 4,
            "name": "RAINBOW TEA",
            "supplieruuid": "BUNZL",
        },
        ],
    },
]

except I need this returned as following:

 [
    {
        title: "SLIGRO",
        data: [
        {
            "id": 1,
            "name": "BLACK TEA",
        },
        {
            "id": 2,
            "name": "GREEN TEA",
        },
        ],
    },
    {
        title: "BUNZL",
        data: [
        {
            "id": 3,
            "name": "PURPLE TEA",
        },
        {
            "id": 4,
            "name": "RAINBOW TEA",
        },
        ],
    },
]

How can I modify the reduce function to display the array as above? With the title and data added.

How an object contains 2 properties with the same names title and data in your expected result. You can't achieve this. — DecPK
– DecPK, Commented Jun 2, 2021 at 10:47
So sorry, I just updated what I meant. I forgot to close the object. — Wolf
– Wolf, Commented Jun 2, 2021 at 10:52

Nina Scholz · Accepted Answer · 2021-06-02 16:11:52Z

2

You could take a grouping with an object and a destructuring with unwanted properties for the data. At the end take only the values from the object.

const
    data = [{ id: 1, name: "BLACK TEA", supplieruuid: "SLIGRO" }, { id: 2, name: "GREEN TEA", supplieruuid: "SLIGRO" }, { id: 3, name: "PURPLE TEA", supplieruuid: "BUNZL" }, { id: 4, name: "RAINBOW TEA", supplieruuid: "BUNZL" }],
    result = Object.values(data.reduce((r, { supplieruuid: title, ...o }) => {
        (r[title] ??= { title, data: [] }).data.push(o);
        return r;
    }, {}));

console.log(result);

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

answered Jun 2, 2021 at 16:11

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

DecPK · Accepted Answer · 2021-06-02 10:54:20Z

As you are using reduce, and you need to pass an empty [] as an accumulator.

Second, you need to search for the element if it exists in acc array or not. If it exists then you push the object in the acc else add a new object with 2 property title and data.

const arr = [
  {
    id: 1,
    name: "BLACK TEA",
    supplieruuid: "SLIGRO",
  },
  {
    id: 2,
    name: "GREEN TEA",
    supplieruuid: "SLIGRO",
  },
  {
    id: 3,
    name: "PURPLE TEA",
    supplieruuid: "BUNZL",
  },
  {
    id: 4,
    name: "RAINBOW TEA",
    supplieruuid: "BUNZL",
  },
];

const result = arr.reduce((acc, curr) => {
  const { supplieruuid } = curr;
  const objInAcc = acc.find((o) => o.title === supplieruuid);
  if (objInAcc) objInAcc.data.push(curr);
  else acc.push({ title: supplieruuid, data: [curr] });
  return acc;
}, []);

console.log(result);

Tomeu Cabot · Accepted Answer · 2021-06-02 10:58:29Z

0

Keeping your selectSortedItems like it is, we could create another function to map it as you wish.

const selectSortedItems = (state) => {
  const sortedBySupplierUUID = state.entities.cart.list.reduce((hash, { ["supplieruuid"]: value, ...rest }) => ({ ...hash, [value]: (hash[value] || []).concat({ ...rest }) }), {});
  return Object.keys(selectSortedItems(sortedBySupplierUUID)).map(key => ({ title: key, data: sortedBySupplierUUID[key] }))};
}

edited Jun 2, 2021 at 10:58

answered Jun 2, 2021 at 10:50

Tomeu Cabot

4232 silver badges8 bronze badges

3 Comments

Wolf Over a year ago

Thank you for your reply, since I use the const selectSortedItems inside a useSelector function I get the error 'You must pass a selector to useSelector';

Tomeu Cabot Over a year ago

Yes, sorry @Wolf, I forget to add your whole state selector (state.entities.cart.list) since I tested locally. I updated the answer, let me know if it works.

Wolf Over a year ago

You are awesome! Thanks for you help. It worked!

Collectives™ on Stack Overflow

How do I group objects by key and modify the array the reduce function returns?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related