How to add numbers when they have same category?

Question

Code I am trying so far

let data = [
{size: 1180160, category: "Keswick", index: 1},
{size: 1059328, category: "HCOPA", index: 2},
{size: 30720, category: "HCOPA", index: 3},
{size: 493056, category: "Darhan Saluja", index: 4},
{size: 267776, category: "CRSA", index: 5},:
{size: 328704, category: "Arundel", index: 6}
{size: 73216, category: "Arundel", index: 7}

data.forEach((product, index) => {

           let size = 0;
           if (product.category !== lastCategory) {
             size = product.size + size;
             rows.push(
                <ProductCategoryRow size={size}
                                    category={product.category}
                                    key={product.category}/>
            );
        }
        rows.push(
            <ProductRow
                product={product}
                key={product.name} index={index}/>
        );
        lastCategory = product.category;

    });

I want calculate size which have same category. So that will pass through as props to component

Answer 1

I suggest you to create new object first that contains all data you need with sum up of properties that you need and then use that object to perform whatever logic you need.

Look at the snippet below and feel free to adjust it to your needs.

 let data = [ {size: 1180160, category: "Keswick", index: 1}, {size: 1059328, category: "HCOPA", index: 2}, {size: 30720, category: "HCOPA", index: 3}, {size: 493056, category: "Darhan Saluja", index: 4}, {size: 267776, category: "CRSA", index: 5}, {size: 328704, category: "Arundel", index: 6}, {size: 73216, category: "Arundel", index: 7}] const dataWithSum = data.reduce((acc, current) => { acc[current.category] = acc[current.category] ? acc[current.category] + current.size : current.size; return acc }, {}) console.log(dataWithSum) 

Answer 2

You can create chunks of your data and then render it like

let data = [
{size: 1180160, category: "Keswick", index: 1},
{size: 1059328, category: "HCOPA", index: 2},
{size: 30720, category: "HCOPA", index: 3},
{size: 493056, category: "Darhan Saluja", index: 4},
{size: 267776, category: "CRSA", index: 5},
{size: 328704, category: "Arundel", index: 6},
{size: 73216, category: "Arundel", index: 7}]

const chunk = data.reduce((acc, item) => {
    if(acc[item.category]) {
      acc[item.category] = acc[item.category].concat(item)
    } else {
      acc[item.category] = [item];
   }
   return acc
}, {})

Object.keys(chunk).forEach((category, index) => {
   rows.push(
      <ProductCategoryRow 
          size={size}
          category={category}
          key={category}/>
  );
  chunk[category].forEach((product, index)) => {
     rows.push(
        <ProductRow
            product={product}
            key={product.name}/>
     );
  }
});

Answer 3

Use reduce and findIndex . findIndex will be used to find if the new array have any object where the category matches.If it does then update the size else add the category name and it's size

 let data = [{ size: 1180160, category: "Keswick", index: 1 }, { size: 1059328, category: "HCOPA", index: 2 }, { size: 30720, category: "HCOPA", index: 3 }, { size: 493056, category: "Darhan Saluja", index: 4 }, { size: 267776, category: "CRSA", index: 5 }, { size: 328704, category: "Arundel", index: 6 }, { size: 73216, category: "Arundel", index: 7 } ] var reduceCat = data.reduce(function(acc, curr) { // find the index of the category // return -1 if the category is not present var ifCatAvailable = acc.findIndex(function(item) { return curr.category === item.category; }) // if category is not present then // add the category and it's size if (ifCatAvailable === -1) { let locObj = { category: curr.category, size: curr.size } acc.push(locObj) // if catgory is present then update it's size } else { acc[ifCatAvailable].size += curr.size } return acc; }, []); console.log(reduceCat) 

Answer 4

you can also create the array of categories and put the result in an array result = [ categorie, size ]

let data = [
{size: 1180160, category: "Keswick", index: 1},
{size: 1059328, category: "HCOPA", index: 2},
{size: 30720, category: "HCOPA", index: 3},
{size: 493056, category: "Darhan Saluja", index: 4},
{size: 267776, category: "CRSA", index: 5},
{size: 328704, category: "Arundel", index: 6},
{size: 73216, category: "Arundel", index: 7}];

let categories = [];
let result = [];

data.forEach((product, index) => {
            if( !categories.includes(product.category) ) {
              categories.push(product.category);
              result.push({
                category : product.category,
                size: product.size
                });
            }
            else{
              result.find(x => x.category === product.category).size += product.size;
            }    
    });
console.log(data, categories, result);