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

Dynamic web page updates from server using an Ajax request

Include parameters for a pagination system

What steps should I take to successfully install using npm if I keep encountering the same error?

Trigger an alert message upon loading the HTML page with search text

Troubleshooting Cache Problems in Express.js 4.0 during Development

Is it possible to retrieve any user data by id using Vue 3 Firebase Auth?

Tips for refreshing the tawk.to widget when the language changes with the help of i18next

Split an array of simple data types in JavaScript into separate sections

Is the callback still triggered even after the off function is called?

Guide on hiding the sidebar in mobile view and enabling toggling on click for both mobile and other devices with the use of vue.js and bootstrap4

Display all months on mobile screen using Mui DesktopDatePicker

Encountering npm install failure post updating node version

Simple server using node.js and express to host an HTML file and associated resources

Tips for creating visually appealing text on a web browser with the help of open-source libraries

Struggling to make jQuery code function in an external file without causing clashes with additional jQuery code

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon

What is the response of Express when it encounters numerous identical asynchronous requests from the same origin?

Tips for fixing the TS2345 compilation error when working with React

Utilizing Angular JS to Manage Controller Events

Utilize JavaScript conditions to dynamically apply styles within your web application