Exploring the power of grouping and iterating through object/arrays using the .reduce method in Vue

Question

Exploring the power of grouping and iterating through object/arrays using the .reduce method in Vue

Imagine having an array with unknown IDs. How can we dynamically group and display them? Since the number of different IDs is uncertain, the number of arrays created will also be unknown.

In theory, the solution could involve grouping objects by their respective IDs and pushing them into new arrays named as 'array-0', 'array-1', and so on. Then, we would need to determine the total number of arrays created and iterate through the items using something like

item in array-["n in nArrays"]

. Although this approach may not work due to limitations on dynamically creating loops, it helps illustrate the concept.

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 for instance
</div>

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

However, the aim is to achieve dynamic functionality.

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

javascript vue.js nuxt.js

Answer 1

Answer №1

A reducer from this source can be utilized along with the function below:

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

This approach provides a neatly organized object that can be easily iterated over:

const data = [
  { 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(data, 'id')
// resulting object will look like this
{
  "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 complete code implementation would resemble this:

<template>
  <main>
    <div v-for="(groupedData, id) in itemsToIterateOn" :key="id">
      <pre v-for="array in groupedData" :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 {
      itemsToIterateOn: 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>

Resulting in a visual representation like this:

https://i.sstatic.net/f8734.png

Answer 2

A reducer from this source can be utilized along with the function below:

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

This approach provides a neatly organized object that can be easily iterated over:

const data = [
  { 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(data, 'id')
// resulting object will look like this
{
  "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 complete code implementation would resemble this:

<template>
  <main>
    <div v-for="(groupedData, id) in itemsToIterateOn" :key="id">
      <pre v-for="array in groupedData" :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 {
      itemsToIterateOn: 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>

Resulting in a visual representation like this:

https://i.sstatic.net/f8734.png

Exploring the power of grouping and iterating through object/arrays using the .reduce method in Vue

Answer №1

Similar questions

The input tag contains an empty Request.Form

"Having trouble with sound in react-native-sound while playing audio on an Android AVD? Discover the solution to fix this

Building a versatile and interactive table using AngularJS with data sourced from a

Issue with Ajax: parameters failing to pass without using jQuery

The Canvas Clear function is malfunctioning; the items in the array are not being deleted

Ways to emphasize search outcomes in Flask/HTML?

Showing Nested Arrays in Angular 2

What is the best way to handle a specific submit button using jQuery/Ajax?

Is it possible to stack one Canvas on top of another?

JavaScript eliminates any existing CSS styling

Is it considered a poor practice to self-instantiate within a static method of a JavaScript class

Invoking a PHP function within a JavaScript file

What are the consequences of incorporating JavaScript in PHP code for changing locations?

Click on the image to select a radio button option

Adapting the column width to display or hide content with CSS styling

Exploring the versatility of combining CSS classes with MUI 5 SX prop

Complete picture in a circular div with aspect ratio

Using Javascript, display an image that was previously hidden with CSS when a radio button is selected

How can I check if the VPN is turned off in a React application?

Assess JavaScript for Fetch API implementation