Merge identical data into a unified field within a table

Question

Merge identical data into a unified field within a table

I have a table that displays different colors and their quantities. I would like to merge rows with the same color into one row, with the total quantity shown in that row.

For instance, if there are 2 "black" colors with quantities of 5 and 2, I want to combine these two rows into one with the quantity field showing "5+2 = 7".

Here is an example of what I am looking for:

th{
border:1px solid black;
}

<table>
<thead>
<tr>
<th>Color</th>
<th>Rate</th>
<th>Qty</th>

</tr>
</thead>
<tbody>
<tr>
<td>white</td>
<td>1</td>
<td>0</td>
</tr>

<tr>
<td>Black</td>
<td>5</td>
<td>7</td>
</tr>
<tr>
<td>red</td>
<td>6</td>
<td>0</td>
</tr>

</tbody>
</table>

javascript vue.js

Answer 1

Answer №1

To achieve this task with ease, you can utilize a single pass through the data using JavaScript's reduce() method instead of resorting to multiple loops.

const information = { categories: [{ "selectedCategory": "clothing", "selectedPrice": 30, "isSelected": true }, { "selectedCategory": "electronics", "selectedPrice": 50, "isSelected": false }, { "selectedCategory": "books", "selectedPrice": 20, "isSelected": true } ]};

const totalResult = information.categories.reduce((acc, {
    selectedCategory: sc,
    selectedPrice: sp,
    isSelected: si
}) => {

    if (acc[sc]) return {
        ...acc,
        [sc]: {
            selectedCategory: sc,
            selectedPrice: acc[sc].selectedPrice + parseInt(sp),
            isSelected: acc[sc].isSelected && si
        }
    }

    return {
        ...acc,
        [sc]: {
            selectedCategory: sc,
            selectedPrice: parseInt(sp),
            isSelected: si
        }
    }

}, {});

console.log(Object.values(totalResult));

Answer 2

To achieve this task with ease, you can utilize a single pass through the data using JavaScript's reduce() method instead of resorting to multiple loops.

const information = { categories: [{ "selectedCategory": "clothing", "selectedPrice": 30, "isSelected": true }, { "selectedCategory": "electronics", "selectedPrice": 50, "isSelected": false }, { "selectedCategory": "books", "selectedPrice": 20, "isSelected": true } ]};

const totalResult = information.categories.reduce((acc, {
    selectedCategory: sc,
    selectedPrice: sp,
    isSelected: si
}) => {

    if (acc[sc]) return {
        ...acc,
        [sc]: {
            selectedCategory: sc,
            selectedPrice: acc[sc].selectedPrice + parseInt(sp),
            isSelected: acc[sc].isSelected && si
        }
    }

    return {
        ...acc,
        [sc]: {
            selectedCategory: sc,
            selectedPrice: parseInt(sp),
            isSelected: si
        }
    }

}, {});

console.log(Object.values(totalResult));

Answer 3

Answer №2

If you want to optimize your code, consider creating a computed method to generate a new array. Instead of directly accessing the data in your v-for loop, utilize the computed property.

You can see an example implementation in this CodePen: https://codepen.io/ValentinM27/pen/GRGvmMp?editors=1011

Below is the key segment of the code:

...
computed: {
      getGrouped() {
        let groupedItems = [];
        this.items.forEach((item, index) => {
          // Check if the item has been processed before
          const exists = groupedItems.some(i => i.id === item.id);
          
          // Avoid duplicate processing
          if(exists) return;
          
          this.items.forEach((item2, index2) => {
            // Process items with matching criteria but different indexes
            if(item.criteria === item2.criteria && index !== index2) {
              item.value = parseInt(item.value) + parseInt(item2.value);
            }
          })
          
          // Add the aggregated item to the result array
          groupedItems.push(item);
        })
        
        // Return the final array with aggregated values
        return groupedItems;
      }
   },
...

Update your template as follows:

...
<div v-for="(item, i) in getGrouped" :key="i">
...

Hope this solution meets your requirements!

Answer 4

If you want to optimize your code, consider creating a computed method to generate a new array. Instead of directly accessing the data in your v-for loop, utilize the computed property.

You can see an example implementation in this CodePen: https://codepen.io/ValentinM27/pen/GRGvmMp?editors=1011

Below is the key segment of the code:

...
computed: {
      getGrouped() {
        let groupedItems = [];
        this.items.forEach((item, index) => {
          // Check if the item has been processed before
          const exists = groupedItems.some(i => i.id === item.id);
          
          // Avoid duplicate processing
          if(exists) return;
          
          this.items.forEach((item2, index2) => {
            // Process items with matching criteria but different indexes
            if(item.criteria === item2.criteria && index !== index2) {
              item.value = parseInt(item.value) + parseInt(item2.value);
            }
          })
          
          // Add the aggregated item to the result array
          groupedItems.push(item);
        })
        
        // Return the final array with aggregated values
        return groupedItems;
      }
   },
...

Update your template as follows:

...
<div v-for="(item, i) in getGrouped" :key="i">
...

Hope this solution meets your requirements!

Merge identical data into a unified field within a table

Answer №1

Answer №2

Similar questions

Develop universal filter functions that each interact with a shared API and implement them across various components within a VUE.js application

What is the best way to invoke a Rest API within a Vue component?

Tips for assigning unique names to each radio input groupNeed to assign unique names to radio

Calculating the position of an element in an array passed from a separate file with ReactJS and Ant Design

Troubleshooting: AngularJS - Issues with nested controllers not functioning properly within ng-include

Tips for passing a state value to a different state when initializing in react js

The Vue application is unable to expand to 100% height when using a media query

The journey of data starting from a PHP file, moving through JavaScript, and circling back to PHP

Unable to bring in openai on Node.js

The proper method to retrieve the parent function parameter within an inner JavaScript callback function

The Navigation Bar in Vue Component Renders Incorrectly due to Bootstrap Integration

Problem arising from apostrophe usage in Javascript OData request

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via

Is it possible to manage the form submission in React after being redirected by the server, along with receiving data

Is the jqm flipswitch with the label on the left and the switch on the right?

Generating new elements on the fly using jQuery and passing a string parameter through the onclick event

Is it possible to dynamically group by one column in a dataset without requiring a trigger function?

Summing up numbers within a hierarchical table using jQuery

Updating the JSON format output from snake case to camel case in a React web application

Subscribe on Footer triggers automatic scrolling to the bottom of the page