Eliminate duplicates from an array using ES6 and values as criteria

Question

Eliminate duplicates from an array using ES6 and values as criteria

Here is an array that I need to manipulate:

const array = [
{id: 3, amount: 100, productId: 10, title: "Color/Red", variantChildren: Array(0)},
{id: 4, amount: 5, productId: 10, title: "Color/Green", variantChildren: Array(2)},
{amount: 0, variantChildren: {…}, title: "Color/Red"},
{amount: 0, variantChildren: {…}, title: "Color/Green"},
{amount: 0, variantChildren: {…}, title: "Color/Purple"}
]

I want to remove items with an amount of 0 using either .filter() or .forEach().

This would result in a new array without the zero amounts:

const newArray = [
{id: 3, amount: 100, productId: 10, title: "Color/Red", variantChildren: Array(0)},
{id: 4, amount: 5, productId: 10, title: "Color/Green", variantChildren: Array(2)},
{amount: 0, variantChildren: {…}, title: "Color/Purple"}
]

javascript ecmascript-6

Answer 1

Answer №1

Transform the array into a Map by filtering out items that are duplicates or have a total less than or equal to 0.

Then, convert the Map's .values() iterator into an array using Array.from().

const data = [{"id":3,"amount":100,"productId":10,"title":"Color/Red","variantChildren":[]},{"id":4,"amount":5,"productId":10,"title":"Color/Green","variantChildren":[null,null]},{"amount":0,"variantChildren":{},"title":"Color/Red"},{"amount":0,"variantChildren":{},"title":"Color/Green"},{"amount":0,"variantChildren":{},"title":"Color/Purple"}];

const result = Array.from(
  data.reduce((acc, o) =>
    !acc.has(o.title) || o.amount > 0 ? acc.set(o.title, o) : acc, new Map())
  .values()
);

console.log(result);

Answer 2

Transform the array into a Map by filtering out items that are duplicates or have a total less than or equal to 0.

Then, convert the Map's .values() iterator into an array using Array.from().

const data = [{"id":3,"amount":100,"productId":10,"title":"Color/Red","variantChildren":[]},{"id":4,"amount":5,"productId":10,"title":"Color/Green","variantChildren":[null,null]},{"amount":0,"variantChildren":{},"title":"Color/Red"},{"amount":0,"variantChildren":{},"title":"Color/Green"},{"amount":0,"variantChildren":{},"title":"Color/Purple"}];

const result = Array.from(
  data.reduce((acc, o) =>
    !acc.has(o.title) || o.amount > 0 ? acc.set(o.title, o) : acc, new Map())
  .values()
);

console.log(result);

Answer 3

Answer №2

const itemsArray = [
  {id: 3, amount:100, productId:10, title:"Color/Red", variantChildren:Array(0)},
  {id: 4, amount:5, productId:10, title:"Color/Green", variantChildren:Array(2)},
  {amount:0, variantChildren:{}, title:"Color/Red"},
  {amount:0, variantChildren:{}, title:"Color/Green"},
  {amount:0, variantChildren:{}, title:"Color/Purple"},
  {id: 5, amount: 3, productId: 11, title: "Color/Green", variantChildren: Array(2)},
  {id: 6, amount: 10, productId: 12, title: "Color/Red", variantChildren: Array(0)},
  {amount: 2, variantChildren: {}, title: "Color/Purple"},
  {amount: 0, variantChildren: {}, title: "Color/Purple"}
];

const findNonZeroItems = arr => {
  const titleItemsMap = arr.reduce((acc,item) => {
    const { title, amount } = item;
    if(acc[title]) acc[title].push(item);
    else acc[title] = [item];
    return acc;
  }, {});
  
  const result = Object.values(titleItemsMap).reduce((acc, titleItems) => {
    const filteredItems = titleItems.length > 1
      ? titleItems.filter(item => item.amount !== 0)
      : titleItems;
      
    return [...acc, ...filteredItems]
  }, []);
  
  return result;
}

console.log( findNonZeroItems(itemsArray) );

Answer 4

const itemsArray = [
  {id: 3, amount:100, productId:10, title:"Color/Red", variantChildren:Array(0)},
  {id: 4, amount:5, productId:10, title:"Color/Green", variantChildren:Array(2)},
  {amount:0, variantChildren:{}, title:"Color/Red"},
  {amount:0, variantChildren:{}, title:"Color/Green"},
  {amount:0, variantChildren:{}, title:"Color/Purple"},
  {id: 5, amount: 3, productId: 11, title: "Color/Green", variantChildren: Array(2)},
  {id: 6, amount: 10, productId: 12, title: "Color/Red", variantChildren: Array(0)},
  {amount: 2, variantChildren: {}, title: "Color/Purple"},
  {amount: 0, variantChildren: {}, title: "Color/Purple"}
];

const findNonZeroItems = arr => {
  const titleItemsMap = arr.reduce((acc,item) => {
    const { title, amount } = item;
    if(acc[title]) acc[title].push(item);
    else acc[title] = [item];
    return acc;
  }, {});
  
  const result = Object.values(titleItemsMap).reduce((acc, titleItems) => {
    const filteredItems = titleItems.length > 1
      ? titleItems.filter(item => item.amount !== 0)
      : titleItems;
      
    return [...acc, ...filteredItems]
  }, []);
  
  return result;
}

console.log( findNonZeroItems(itemsArray) );

Answer 5

Answer №3

let unfilteredArray = [{amount: 0}, {amount: 0}, {amount: 1}, {amount: 2}]
let tempArray = [];
let filteredArray = unfilteredArray.filter((value, index, arr) => {
  let isUnique = !(tempArray.map(v => v.amount).includes(value.amount))
  tempArray.push(value)
  return isUnique;
});
console.log(filteredArray);

Learn more about Array Filter on MDN

The provided code may seem complex at first glance. In essence, the filter method iterates through an array and applies a function that should return true or false. If true, the current value is added to a new array, otherwise it is omitted. In this case, the function inspects the temporary array for uniqueness based on the 'amount' property of each element. The temporary array is updated with each iteration to ensure that no duplicate 'amount' values are present in the final filtered array.

Answer 6

let unfilteredArray = [{amount: 0}, {amount: 0}, {amount: 1}, {amount: 2}]
let tempArray = [];
let filteredArray = unfilteredArray.filter((value, index, arr) => {
  let isUnique = !(tempArray.map(v => v.amount).includes(value.amount))
  tempArray.push(value)
  return isUnique;
});
console.log(filteredArray);

Learn more about Array Filter on MDN

The provided code may seem complex at first glance. In essence, the filter method iterates through an array and applies a function that should return true or false. If true, the current value is added to a new array, otherwise it is omitted. In this case, the function inspects the temporary array for uniqueness based on the 'amount' property of each element. The temporary array is updated with each iteration to ensure that no duplicate 'amount' values are present in the final filtered array.

Answer 7

Answer №4

When utilizing methods like .filter or .forEach, it is necessary to iterate through each element and remove any duplicates found at lower indexes.

const array = [
    {id: 3, amount: 100, productId: 10, title: "Color/Red"},
    {id: 4, amount: 5, productId: 10, title: "Color/Green"},
    {amount: 0, title: "Color/Red"},
    {amount: 0, title: "Color/Green"},
    {amount: 0, title: "Color/Purple"}
]

const result = array.filter((el, i) => {
    const dupIndex = array.findIndex(e => e.amount === el.amount)
    return i <= dupIndex
})

console.log(result)

Answer 8

When utilizing methods like .filter or .forEach, it is necessary to iterate through each element and remove any duplicates found at lower indexes.

const array = [
    {id: 3, amount: 100, productId: 10, title: "Color/Red"},
    {id: 4, amount: 5, productId: 10, title: "Color/Green"},
    {amount: 0, title: "Color/Red"},
    {amount: 0, title: "Color/Green"},
    {amount: 0, title: "Color/Purple"}
]

const result = array.filter((el, i) => {
    const dupIndex = array.findIndex(e => e.amount === el.amount)
    return i <= dupIndex
})

console.log(result)

Eliminate duplicates from an array using ES6 and values as criteria

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Do not execute the JavaScript code if the cookie is present

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

Is it possible to create dynamic tabs using Bootstrap on .aspx pages?

Problems with the zoom functionality for images on canvas within Angular

Issue with Dropup Menu not displaying on Safari 6

Updating a specific property within an array of objects by identifying its unique id and storing it in a separate array of objects

What is causing me to receive a Request Method of "GET" instead of "POST"?

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

Utilizing Three.js with interactive functionalities and advanced transformation controls

How to leverage the parent component scope within the b-table slot

Is it possible for Angular and Flux to collaborate harmoniously?

Combining JSON array objects in Vanilla Javascript to create a nested array based on a shared value

Angular: Transferring dynamic functions between parent and grandchild components

Leveraging the wheelDelta property in the onmousewheel event handler with Script#

What could be causing the malfunction of this Ajax conditional dialog?

Exploring the world of third-party widgets: Comparing Angular, jQuery, and traditional JavaScript

Encountering a Next.js prerendering issue when using getStaticPaths

Uncertainty arises when trying to understand the callback function supplied to the `addEventListener` method in JavaScript

What is the most effective approach to take when the back button on a browser is pressed?

Is there a way for me to extract an image from Open Flash Chart 2?