Tips for combining or adding duplicated values in a Javascript array

Question

Tips for combining or adding duplicated values in a Javascript array

I am facing a problem with an array object that looks like this:

[
  {"item_id":1,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000}, 
  {"item_id":2,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}
]

When I try to add the same values, it duplicates the items like this:

[
  {"item_id":1,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000},
  {"item_id":2,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000},
  {"item_id":2,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}
]

My aim is to merge duplicate values to have the result like this:

    [
  {"item_id":1,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000},
  {"item_id":2,"name":"Mobile Legend Backpack","image":"XXX","qty":2,"original_price":1350000,"total_price":2700000}
]

I need help to figure this out. Can someone please assist me?

javascript arrays object vue.js duplicates

Answer 1

Answer №1

Check if the item is already in the list before adding it:
if (items.indexOf(toAdd) != -1)
   items.push(toAdd)

Another option is to use jQuery grep, which will give you a list of arrays containing the specified values

Use jQuery grep to check if the item ID is not already present in the list
if  (($.grep(items, function(e){ return e.id == toAdd.id; })) == 0)
   items.push(toAdd)

Answer 2

Check if the item is already in the list before adding it:
if (items.indexOf(toAdd) != -1)
   items.push(toAdd)

Another option is to use jQuery grep, which will give you a list of arrays containing the specified values

Use jQuery grep to check if the item ID is not already present in the list
if  (($.grep(items, function(e){ return e.id == toAdd.id; })) == 0)
   items.push(toAdd)

Answer 3

Answer №2

To add the new object to the array only if it is not already present and update it otherwise:

You must first check if it exists by utilizing the Array#some() method.
If it does exist, then modify its qty and total_price using the index of the found item.
If it doesn't exist, simply append it to the array.

This is how your code should look like:

var found = -1;
if (arr.some(function(el, i) {
    if (el.name === obj.name)
      found = i;
    return el.name === obj.name;
  })) {
  arr[found]["qty"] = arr[found]["qty"] + obj["qty"];
  arr[found]["total_price"] = arr[found]["total_price"] + obj["total_price"];
} else {
  arr.push(obj);
}

Demo:

var arr = [{
    "item_id": 'X',
    "name": "DOTA 2 Backpack",
    "image": "XXX",
    "qty": 1,
    "original_price": 1450000,
    "total_price": 1450000
  },
  {
    "item_id": 'X',
    "name": "Mobile Legend Backpack",
    "image": "XXX",
    "qty": 1,
    "original_price": 1350000,
    "total_price": 1350000
  }
];

var obj = {
  "item_id": 'X',
  "name": "Mobile Legend Backpack",
  "image": "XXX",
  "qty": 1,
  "original_price": 1350000,
  "total_price": 1350000
};
var found = -1;
if (arr.some(function(el, i) {
    if (el.name === obj.name)
      found = i;
    return el.name === obj.name;
  })) {
  arr[found]["qty"] = arr[found]["qty"] + obj["qty"];
  arr[found]["total_price"] = arr[found]["total_price"] + obj["total_price"];
} else {
  arr.push(obj);
}

console.log(arr);

Answer 4

To add the new object to the array only if it is not already present and update it otherwise:

You must first check if it exists by utilizing the Array#some() method.
If it does exist, then modify its qty and total_price using the index of the found item.
If it doesn't exist, simply append it to the array.

This is how your code should look like:

var found = -1;
if (arr.some(function(el, i) {
    if (el.name === obj.name)
      found = i;
    return el.name === obj.name;
  })) {
  arr[found]["qty"] = arr[found]["qty"] + obj["qty"];
  arr[found]["total_price"] = arr[found]["total_price"] + obj["total_price"];
} else {
  arr.push(obj);
}

Demo:

var arr = [{
    "item_id": 'X',
    "name": "DOTA 2 Backpack",
    "image": "XXX",
    "qty": 1,
    "original_price": 1450000,
    "total_price": 1450000
  },
  {
    "item_id": 'X',
    "name": "Mobile Legend Backpack",
    "image": "XXX",
    "qty": 1,
    "original_price": 1350000,
    "total_price": 1350000
  }
];

var obj = {
  "item_id": 'X',
  "name": "Mobile Legend Backpack",
  "image": "XXX",
  "qty": 1,
  "original_price": 1350000,
  "total_price": 1350000
};
var found = -1;
if (arr.some(function(el, i) {
    if (el.name === obj.name)
      found = i;
    return el.name === obj.name;
  })) {
  arr[found]["qty"] = arr[found]["qty"] + obj["qty"];
  arr[found]["total_price"] = arr[found]["total_price"] + obj["total_price"];
} else {
  arr.push(obj);
}

console.log(arr);

Answer 5

Answer №3

Take a look at this information, it may be beneficial to you.

If you're interested, check out the Array Iteration methods

var array1 = [
  {"item_id":X,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000}, 
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}
];

var array2 = [
  {"item_id":X,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000},
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000},
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}
]

var props = ['name', 'item_id'];

var result = array1.filter(function(o1){

    return !array2.some(function(o2){
        return o1.item_id=== o2.item_id;         
    });
}).map(function(o){

    return props.reduce(function(newo, name){
        newo[name] = o[name];
        return newo;
    }, {});
});

Your Output:

[
  {"item_id":X,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000},
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}

]

I hope this is helpful for you!

Answer 6

Take a look at this information, it may be beneficial to you.

If you're interested, check out the Array Iteration methods

var array1 = [
  {"item_id":X,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000}, 
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}
];

var array2 = [
  {"item_id":X,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000},
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000},
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}
]

var props = ['name', 'item_id'];

var result = array1.filter(function(o1){

    return !array2.some(function(o2){
        return o1.item_id=== o2.item_id;         
    });
}).map(function(o){

    return props.reduce(function(newo, name){
        newo[name] = o[name];
        return newo;
    }, {});
});

Your Output:

[
  {"item_id":X,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000},
  {"item_id":X,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}

]

I hope this is helpful for you!

Answer 7

Answer №4

If you're looking to perform a comparison using the element's item_id, consider utilizing the Array.prototype.reduce() method.

Check out this code example:

const array = [{"item_id": 1,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000}, {"item_id":2,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}];
const newVal = {"item_id": 2,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000};

const addElement = (arr, val) => {
  return arr.reduce((a, c, i) => {
    if (c['item_id'] === val['item_id']) {
      a.found = true;
      c.qty += val.qty;
    }
    
    a.result.push(c);
    
    return !a.found && i + 1 === arr.length
      ? [].concat(arr.result, val)
      : a;
  }, {result: [], found: false});
};


console.log(addElement(array, newVal).result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 8

If you're looking to perform a comparison using the element's item_id, consider utilizing the Array.prototype.reduce() method.

Check out this code example:

const array = [{"item_id": 1,"name":"DOTA 2 Backpack","image":"XXX","qty":1,"original_price":1450000,"total_price":1450000}, {"item_id":2,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000}];
const newVal = {"item_id": 2,"name":"Mobile Legend Backpack","image":"XXX","qty":1,"original_price":1350000,"total_price":1350000};

const addElement = (arr, val) => {
  return arr.reduce((a, c, i) => {
    if (c['item_id'] === val['item_id']) {
      a.found = true;
      c.qty += val.qty;
    }
    
    a.result.push(c);
    
    return !a.found && i + 1 === arr.length
      ? [].concat(arr.result, val)
      : a;
  }, {result: [], found: false});
};


console.log(addElement(array, newVal).result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Tips for combining or adding duplicated values in a Javascript array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

CSS file not loading in an ExpressJS application

Issues with the directory for Chrome

Tips for addressing the Stale Element Reference Exception when locating an element in JMeter

Using VueJS to apply filters to an object causes a decrease in my application's performance

The true essence of Angular values only comes to light once the view has been updated

Unable to update the numerical value in the Material-UI version 5 TextField component

Splitting files with Webpack generates dynamic chunk files

jQuery custom slider with advanced previous and next navigation capability for jumping multiple steps

How to set a background image in Android using an array path for the image location

Restarting an Angular app is necessary once its HTML has been updated

Tips for managing CSS/style conflicts in JavaScript/AngularJS applications

What is the best way to find the most similar arrays in two lists using Python?

JSON is often portrayed as a singular value

Utilize text wrapping to ensure a fixed maximum height for content display

Struggling with sending form data to the back end when uploading images in Angular

Utilizing variables in Angular service to make API calls

Creating a customized plugin in JavaScript that utilizes a local JSON/GeoJSON file

Begin by executing the initial commit task with Git through Gulp, followed by performing the

Unable to input information into Textbox in real-time

sending a pair of variables via jQuery and AJAX