Determine the number of duplicate items in an array of objects using JavaScript and save the count as a separate object

Question

Determine the number of duplicate items in an array of objects using JavaScript and save the count as a separate object

I have a collection of objects in JavaScript representing products. These products are shown in a list similar to a shopping cart.

The goal is to identify and count duplicate products in the array based on their _id value. Once duplicates are found, they should be removed and replaced with an updated version of the product. The new version should include a new key called count, indicating the total number of times the object appeared in the array.

I've explored various methods and searched extensively online, but haven't found a solution that meets this specific requirement.

An example of the array structure I'm working with is:

[

    {  _id: "5971df93bfef201237985c4d", 
       slug: "5971df93bfef201237985c4d", 
       taxPercentage: 23, 
       totalCost: 9.99, 
       currency: "EUR", 
    },

]

The desired end result should look like this - the duplicate is replaced with a new object containing the same information, but with an added key count indicating the frequency of the object:

[

    {  _id: "5971df93bfef201237985c4d", 
       slug: "5971df93bfef201237985c4d", 
       taxPercentage: 23, 
       totalCost: 9.99, 
       currency: "EUR", 
       count: 2, // the count value
    },

]

My current approach involves:

var count = [];

if (cart.cart.products != undefined) {
    let namestUi = {
        renderNames(names){
            return Array.from(
                names.reduce( (counters, object) =>
                        counters.set(object._id, (counters.get(object._id) || 0) + 1),
                    new Map() ),
                ([object, count]) => {
                    var filterObj = names.filter(function(e) {
                        return e._id == object;
                    });

                    return ({filterObj, count})
                }
            );
        }
    };

    count = namestUi.renderNames(cart.cart.products);
    console.log(count)
}

However, the output is not as expected:

{filterObj: Array // array of duplicates, count: 2}
{filterObj: Array, count: 1}

Since I'm working with React-Native and a list view, this format doesn't suit my requirements. The items need to be stored in an array format but with a new property called count.

Any suggestions or assistance would be greatly appreciated!

javascript arrays react-native

Answer 1

Answer №1

To achieve the final result, I recommend using the reduce method along with a Map and spreading its values:

const names = [{  _id: 1 }, { _id: 1}, { _id: 2}, { _id: 1}];

const result = [...names.reduce( (mp, o) => {
    if (!mp.has(o._id)) mp.set(o._id, { ...o, count: 0 });
    mp.get(o._id).count++;
    return mp;
}, new Map).values()];

console.log(result);

Another approach is to initialize all keys in the map with a zero count using the Map constructor, and then update the counter through a separate iteration. This method can lead to more concise code compared to using reduce:

const names = [{  _id: 1 }, { _id: 1}, { _id: 2}, { _id: 1}];

const mp = new Map(names.map(o => [o._id, {...o, count: 0 }]));
for (const {_id} of names) mp.get(_id).count++;
const result = Array.from(mp.values());

console.log(result);

In cases where there are multiple keys, a suggestion is to combine them using JSON.stringify([ ]):

const names = [{cat: 1, sub: 1}, {cat: 1, sub: 2}, {cat: 2, sub: 1}, {cat: 1, sub: 1}];

const result = [...names.reduce( (mp, o) => {
    const key = JSON.stringify([o.cat, o.sub]);
    if (!mp.has(key)) mp.set(key, { ...o, count: 0 });
    mp.get(key).count++;
    return mp;
}, new Map).values()];

console.log(result);

Answer 2

To achieve the final result, I recommend using the reduce method along with a Map and spreading its values:

const names = [{  _id: 1 }, { _id: 1}, { _id: 2}, { _id: 1}];

const result = [...names.reduce( (mp, o) => {
    if (!mp.has(o._id)) mp.set(o._id, { ...o, count: 0 });
    mp.get(o._id).count++;
    return mp;
}, new Map).values()];

console.log(result);

Another approach is to initialize all keys in the map with a zero count using the Map constructor, and then update the counter through a separate iteration. This method can lead to more concise code compared to using reduce:

const names = [{  _id: 1 }, { _id: 1}, { _id: 2}, { _id: 1}];

const mp = new Map(names.map(o => [o._id, {...o, count: 0 }]));
for (const {_id} of names) mp.get(_id).count++;
const result = Array.from(mp.values());

console.log(result);

In cases where there are multiple keys, a suggestion is to combine them using JSON.stringify([ ]):

const names = [{cat: 1, sub: 1}, {cat: 1, sub: 2}, {cat: 2, sub: 1}, {cat: 1, sub: 1}];

const result = [...names.reduce( (mp, o) => {
    const key = JSON.stringify([o.cat, o.sub]);
    if (!mp.has(key)) mp.set(key, { ...o, count: 0 });
    mp.get(key).count++;
    return mp;
}, new Map).values()];

console.log(result);

Answer 3

Answer №2

A simple solution could involve using a map data structure:

var map=new Map();

names.forEach(function(el){
 if(map.has(el["_id"])){
  map.get(el["_id"]).count++;
 }else{
  map.set(el["_id"],Object.assign(el,{count:1}));
 }
});

Then, you can transform the map back into an array:

names=[...map.values()];

Alternatively, you could use a hash table and an array:

var hash={},result=[];

names.forEach(function(name){
  var id=name["_id"];
  if(hash[id]){
     hash[id].count++;
  }else{
     result.push(hash[id]={
        count:1,
        ...name
     });
  }
});

console.log(result);

Answer 4

A simple solution could involve using a map data structure:

var map=new Map();

names.forEach(function(el){
 if(map.has(el["_id"])){
  map.get(el["_id"]).count++;
 }else{
  map.set(el["_id"],Object.assign(el,{count:1}));
 }
});

Then, you can transform the map back into an array:

names=[...map.values()];

Alternatively, you could use a hash table and an array:

var hash={},result=[];

names.forEach(function(name){
  var id=name["_id"];
  if(hash[id]){
     hash[id].count++;
  }else{
     result.push(hash[id]={
        count:1,
        ...name
     });
  }
});

console.log(result);

Answer 5

Answer №3

To transform an original array into a new array with a desired structure, you can utilize the array.reduce method. This involves checking if the id already exists in the array and updating it accordingly with a new object containing a count property.

let arr = [{
  id: 1
}, {
  id: 1
}, {
  id: 1
}, {
  id: 2
}, {
  id: 2
}];

let new_arr = arr.reduce((ar, obj) => {
  let bool = false;
  if (!ar) {
    ar = [];
  }
  ar.forEach((a) => {
    if (a.id === obj.id) {
      a.count++;
      bool = true;
    }
  });
  if (!bool) {
    obj.count = 1;
    ar.push(obj);
  }
  return ar;
}, []);

console.log(new_arr);

Answer 6

To transform an original array into a new array with a desired structure, you can utilize the array.reduce method. This involves checking if the id already exists in the array and updating it accordingly with a new object containing a count property.

let arr = [{
  id: 1
}, {
  id: 1
}, {
  id: 1
}, {
  id: 2
}, {
  id: 2
}];

let new_arr = arr.reduce((ar, obj) => {
  let bool = false;
  if (!ar) {
    ar = [];
  }
  ar.forEach((a) => {
    if (a.id === obj.id) {
      a.count++;
      bool = true;
    }
  });
  if (!bool) {
    obj.count = 1;
    ar.push(obj);
  }
  return ar;
}, []);

console.log(new_arr);

Determine the number of duplicate items in an array of objects using JavaScript and save the count as a separate object

Answer №1

Answer №2

Answer №3

Similar questions

Tips for removing < and > symbols from the XML response on the client side

Dealing with JSON Stringify and parsing errors in AJAX

CSS not being properly rendered on newly inserted row within table via jQuery

Click event for jQuery horizontal accordion

Manage the Cancel button functionality in Safari/Chrome when dealing with the Open in App Store pop up

Can PHP send back data to AJAX using variables, possibly in an array format?

Connect an input in VueJS to a VueX store state value

MUI: Transforming the uncontrolled value state of Select into a controlled one with a new component

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Unable to retrieve scripts upon returning to the main page of a Jquery website

I need guidance on how to successfully upload an image to Firebase storage with the Firebase Admin SDK

Building routes for a stationary website with Angular

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

Utilizing the <Link> component in React Router to generate URLs based on the root domain

React.js: Passing an array as a property to an element results in the transformation of the array into an object

Unable to see the column filter in the data table

Transmitting JSON information using post method through .ajax(), as well as receiving a JSON reply

Adjusting the gap between TableRows in Material-UI

Implementing OutlinePass from Three.js in React

What are the differences between using attachShadow with the "mode" set to open compared to closed