How to groupBy and iterate on object/array with a .reduce in Vue?

Question

Suppose I have an array and never know what different ID's are contained. How can I group and display them dynamically? Because I will never know how many different ID's are located, I will never know how many different arrays will be created too.

Theoretically, I think we need to group all objects by these ID's and push them into new arrays. These arrays could be named as 'array-0', 'array-1', ... After that, we need to count how many arrays have been created and loop through the items by item in array-["n in nArrays"]. I'm sure this won't work this way because I think we can't dynamically create loops like this, but it's for a better explanation of my idea.

array: [
  { id: 11, item: "item" },
  { id: 49, item: "item" },
  { id: 11, item: "item" },
  { id: 20, item: "item" },
  { id: 49, item: "item" },
  { id: 83, item: "item" },
]

<div v-for="item in array-0">
  {{ item }} // all items with id 11 e.g.
</div>

<div v-for="item in array-1">
  {{ item }} // all items with id 20 e.g.
</div>

But it should be dynamic

<div v-for="item in array-[n in nArrays]">
  {{ item }}
</div>

It's important to master all the array methods: filter, map, find, reduce, splice etc... I recommend that you take Wes Bos's JS30 free challenge course to practice those: javascript30.com (can only make the array cardio ones) or any other challenges foundable on Codewars or alike. This free one is also quite good as a starter: javascript.info/array-methods — kissu
– kissu, Commented Oct 27, 2022 at 10:00
Thank you kissu! I will take it to heart, because I realize that I need to work more and more often with such methods... :-) — Philippe
– Philippe, Commented Oct 27, 2022 at 10:08
Yeah, a big chunk of frontend is how to massage the data to make it fit our needs. — kissu
– kissu, Commented Oct 27, 2022 at 10:10

kissu · Accepted Answer · 2022-10-27 10:07:33Z

You could use this reducer with the following function

function groupBy(objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property];
    const curGroup = acc[key] ?? [];

    return { ...acc, [key]: [...curGroup, obj] };
  }, {});
}

This would give us this well formatted object to then iterate on

const t = [
  { id: 11, item: "first one" },
  { id: 49, item: "tasty thing" },
  { id: 11, item: "amazing right?" },
  { id: 20, item: "cool cool" },
  { id: 49, item: "love watermelons" },
  { id: 83, item: "and you?" },
]

groupBy(t, 'id')
// this will give us the following
{
  "11": [
    {
      "id": 11,
      "item": "first one"
    },
    {
      "id": 11,
      "item": "amazing right?"
    }
  ],
  "20": [
    {
      "id": 20,
      "item": "cool cool"
    }
  ],
  "49": [
    {
      "id": 49,
      "item": "tasty thing"
    },
    {
      "id": 49,
      "item": "love watermelons"
    }
  ],
  "83": [
    {
      "id": 83,
      "item": "and you?"
    }
  ]
}

The whole could would look like this

<template>
  <main>
    <div v-for="(groupedArray, id) in objectToLoopOn" :key="id">
      <pre v-for="array in groupedArray" :key="array.item">{{ array }}</pre>
      <hr />
    </div>
  </main>
</template>

<script>
const groupBy = (objectArray, property) => {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property];
    const curGroup = acc[key] ?? [];

    return { ...acc, [key]: [...curGroup, obj] };
  }, {});
};

export default {
  data() {
    return {
      objectToLoopOn: groupBy(
        [
          { id: 11, item: "first one" },
          { id: 49, item: "tasty thing" },
          { id: 11, item: "amazing right?" },
          { id: 20, item: "cool cool" },
          { id: 49, item: "love watermelons" },
          { id: 83, item: "and you?" },
        ],
        "id"
      ),
    };
  },
};
</script>

Providing us this kind of visual result

Collectives™ on Stack Overflow

How to groupBy and iterate on object/array with a .reduce in Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related