How to group elements to add amounts in array with Vue JavaScript

Question

I have a list that I get from an axios call, what I try is to create an array where the products that have the same id, increase the amount and subtotal for that product, otherwise they will be added with the amount as it is.

but I always get quantity = 1.xx and a wrong total, I do not understand why or where the fault can be

 let dataGroup = [];


 resp.data.forEach((element)=>{
    let indexElement  = dataGroup.findIndex(elm => {
        return (elm.product_id === element.product_id ) && element.print;
    });
    if(indexElement !== -1){
        dataGroup[indexElement].total +=  parseFloat(element.total);
        dataGroup[indexElement].count +=  parseInt(element.count);
        roundNumber(dataGroup[indexElement].count,0);
        roundNumber(dataGroup[indexElement].total,2);
    }
    else{
        dataGroup.push(element);
    }
});

Function

window.roundNumber = function(num, scale) {
  if(!("" + num).includes("e")) {
      return +(Math.round(num + "e+" + scale)  + "e-" + scale);
  } else {
      var arr = ("" + num).split("e");
      var sig = ""
      if(+arr[1] + scale > 0) {
      sig = "+";
      }
      return +(Math.round(+arr[0] + "e" + sig + (+arr[1] + scale)) + "e-" + scale);
  }
}

dataGroup in the first instance is empty, everything works according to the data I receive from my call with axios, for example in the image the first row I must get 9 in quantity but I receive that 1.00, the unit value is 35 should be 9 * 53 in ST, but it's not like that

Response for axios

[
    {
        "id": 4,
        "product_id": 1,
        "count": "1.00",
        "total": "35.00",
        "print": 1
    },
    {    
       "id": 5,
        "product_id": 1,
        "count": "1.00",
        "total": "35.00",
        "print": 1
    },
    {
        "id": 6,
        "product_id": 1,
        "count": "1.00",
        "total": "35.00",
        "print": 1
    }
 ....

Can you provide a demo in JSFiddle or else? provide demo data of dataGroup array, element.print, etc.? — Sajib Khan
– Sajib Khan, Commented Nov 14, 2018 at 17:49
@SajibKhan dataGroup in the first instance is empty, everything works according to the data I receive from my call with axios, for example in the image the first row I must get 9 in quantity but I receive that 1.00, the unit value is 35 should be 9 * 53 in ST, but it's not like that — DarkFenix
– DarkFenix, Commented Nov 14, 2018 at 17:56
@SajibKhan I added a base example of what the axios request gets — DarkFenix
– DarkFenix, Commented Nov 14, 2018 at 18:06

Sajib Khan · Accepted Answer · 2018-11-14 18:48:55Z

1

Here you have some logical issues. Check this (see comments in code):

resp.data.forEach((element)=>{
  let indexElement  = dataGroup.findIndex(elm => {
    return (elm.product_id === element.product_id ) && element.print;
  });
  if(indexElement !== -1){
    // first convert total/count to float/int then update in existing array element
    dataGroup[indexElement].total += roundNumber(parseFloat(element.total), 0);
    dataGroup[indexElement].count += roundNumber(parseInt(element.count), 2);
  }
  else {
    // need to convert total/count to float/int then push to dataGroup
    element.total = roundNumber(parseFloat(element.total), 0);
    element.count = roundNumber(parseInt(element.count), 2);

    dataGroup.push(element);
  }
});

edited Nov 14, 2018 at 18:48

answered Nov 14, 2018 at 18:39

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

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

1 Comment

DarkFenix Over a year ago

Yes, it was that, what a mistake! Thank you

colefner · Accepted Answer · 2018-11-14 18:32:12Z

0

It's because of the way you're initializing the items in the group. String values are returned from the server and then you're trying to add them to floats. Try running this through your console.

"35.00" + parseFloat("35.00")

To solve this issue, you must first initialize the value as a float. Instead of this:

dataGroup.push(element)

Try this:

dataGroup.push({
        id: element.id,
        product_id: element.product_id,
        total: parseInt(element.total),
        count: parseFloat(element.count),
        print: !!element.print,
});

Check out this fiddle

answered Nov 14, 2018 at 18:32

colefner

1,8811 gold badge17 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to group elements to add amounts in array with Vue JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related