How to remove every instance of an item in an array based on its unique identifier using JavaScript

Question

How to remove every instance of an item in an array based on its unique identifier using JavaScript

Is there a way to clean up an array of objects by removing duplicates with the same id? In this case, I only want to keep the object with id 1.

This is my approach:

let data = [{
    "selected": true,
    "id": 3,
    "ProductName": "Aniseed Syrup",
    "SupplierID": 1,
    "CategoryID": 2,
    "QuantityPerUnit": "12 - 550 ml bottles",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "UnitsOnOrder": 70,
    "ReorderLevel": 25,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
  },
  {
    "selected": true,
    "id": 3,
    "ProductName": "Aniseed Syrup",
    "SupplierID": 1,
    "CategoryID": 2,
    "QuantityPerUnit": "12 - 550 ml bottles",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "UnitsOnOrder": 70,
    "ReorderLevel": 25,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
  },
  {
    "selected": true,
    "id": 1,
    "ProductName": "Aniseed Syrup",
    "SupplierID": 1,
    "CategoryID": 2,
    "QuantityPerUnit": "12 - 550 ml bottles",
    "UnitPrice": 10,
    "UnitsInStock": 13,
    "UnitsOnOrder": 70,
    "ReorderLevel": 25,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
  }
]


let data1 = data.filter(item => {
  return _.isEqual(data.lastIndexOf(item.id), data.indexOf(item.id))
})

console.log(data1)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

The result remains unchanged. Ideally, I would like to have an array containing just the object with id 1.

I'm open to suggestions on how to achieve this goal.

P.S: Utilizing lodash is also an option.

javascript arrays object

Answer 1

Answer №1

Is it possible that this lodash method can effectively remove all duplicate values from the array?

_.uniqBy(array,'id')

Answer 2

Is it possible that this lodash method can effectively remove all duplicate values from the array?

_.uniqBy(array,'id')

Answer 3

Answer №2

If you want to efficiently keep track of unique IDs with their repetition count, you can utilize an object. Simply iterate over the array once more and include only those entries in the final output whose count is equal to 1.

let data = [{"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}},{"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}, {"selected": true,"id": 1,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}]
let tracker = {}

data.forEach(({id}) => {
  tracker[id] = tracker[id] || 0
  tracker[id]++
})

const final = data.filter(({id}) => tracker[id] === 1 )

console.log(final)

Answer 4

If you want to efficiently keep track of unique IDs with their repetition count, you can utilize an object. Simply iterate over the array once more and include only those entries in the final output whose count is equal to 1.

let data = [{"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}},{"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}, {"selected": true,"id": 1,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}]
let tracker = {}

data.forEach(({id}) => {
  tracker[id] = tracker[id] || 0
  tracker[id]++
})

const final = data.filter(({id}) => tracker[id] === 1 )

console.log(final)

Answer 5

Answer №3

Avoiding the use of a library, ES6 can handle time complexities at O(n) efficiently. It is also suggested to normalize objects within an array based on their IDs for quicker lookups.

As an illustration, I have included a third object with the ID: 4 to exemplify this code:

let data = [
  {"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}},
  {"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}, 
  {"selected": true,"id": 4,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}]

const deduped = data.reduce( (acc, obj ) => {
  // restructure id from each object
  const {"id" : id}  = obj
  if ( acc[id] ) {
    return acc
  } else {
    return { ...acc, 
            [id]: obj
          }
  }
}, {})

The output in 'dedupe' will be organized by ID:

{ 3: 
   { selected: true,
     id: 3,
     ProductName: 'Aniseed Syrup',
     SupplierID: 1,
     CategoryID: 2,
     QuantityPerUnit: '12 - 550 ml bottles',
     UnitPrice: 10,
     UnitsInStock: 13,
     UnitsOnOrder: 70,
     ReorderLevel: 25,
     Discontinued: false,
     Category: 
      { CategoryID: 2,
        CategoryName: 'Condiments',
        Description: 'Sweet and savory sauces, relishes, spreads, and seasonings' } },
  4: 
   { selected: true,
     id: 4,
     ProductName: 'Aniseed Syrup',
     SupplierID: 1,
     CategoryID: 2,
     QuantityPerUnit: '12 - 550 ml bottles',
     UnitPrice: 10,
     UnitsInStock: 13,
     UnitsOnOrder: 70,
     ReorderLevel: 25,
     Discontinued: false,
     Category: 
      { CategoryID: 2,
        CategoryName: 'Condiments',
        Description: 'Sweet and savory sauces, relishes, spreads, and seasonings' } } }

Answer 6

Avoiding the use of a library, ES6 can handle time complexities at O(n) efficiently. It is also suggested to normalize objects within an array based on their IDs for quicker lookups.

As an illustration, I have included a third object with the ID: 4 to exemplify this code:

let data = [
  {"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}},
  {"selected": true,"id": 3,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}, 
  {"selected": true,"id": 4,"ProductName": "Aniseed Syrup","SupplierID": 1,"CategoryID": 2,"QuantityPerUnit": "12 - 550 ml bottles","UnitPrice": 10,"UnitsInStock": 13,"UnitsOnOrder": 70,"ReorderLevel": 25,"Discontinued": false,"Category": {"CategoryID": 2,"CategoryName": "Condiments","Description": "Sweet and savory sauces, relishes, spreads, and seasonings"}}]

const deduped = data.reduce( (acc, obj ) => {
  // restructure id from each object
  const {"id" : id}  = obj
  if ( acc[id] ) {
    return acc
  } else {
    return { ...acc, 
            [id]: obj
          }
  }
}, {})

The output in 'dedupe' will be organized by ID:

{ 3: 
   { selected: true,
     id: 3,
     ProductName: 'Aniseed Syrup',
     SupplierID: 1,
     CategoryID: 2,
     QuantityPerUnit: '12 - 550 ml bottles',
     UnitPrice: 10,
     UnitsInStock: 13,
     UnitsOnOrder: 70,
     ReorderLevel: 25,
     Discontinued: false,
     Category: 
      { CategoryID: 2,
        CategoryName: 'Condiments',
        Description: 'Sweet and savory sauces, relishes, spreads, and seasonings' } },
  4: 
   { selected: true,
     id: 4,
     ProductName: 'Aniseed Syrup',
     SupplierID: 1,
     CategoryID: 2,
     QuantityPerUnit: '12 - 550 ml bottles',
     UnitPrice: 10,
     UnitsInStock: 13,
     UnitsOnOrder: 70,
     ReorderLevel: 25,
     Discontinued: false,
     Category: 
      { CategoryID: 2,
        CategoryName: 'Condiments',
        Description: 'Sweet and savory sauces, relishes, spreads, and seasonings' } } }

How to remove every instance of an item in an array based on its unique identifier using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Passing a portion of a StringArray to the next Activity by clicking on a ListItem:

Storing the state of web applications in AJAX applications

What is the top choice for creating a cutting-edge front-end web module?

What is the best way to add a property and its value to objects within an array, especially those which do not currently have that specific property?

Is there a way to extract information from the HTML source code of an external website and display it in my application?

Contrasting the utilization of Angular $scope dependency with independent usage

The behavior of a fixed position in Flexbox varies when comparing Chrome to Safari and Firefox

Unresolved styles in React component linked to styles.css file

Leveraging numerous identifiers in jQuery

An array in Numpy that holds a nested array with a distinct data type

Problem arising from apostrophe usage in Javascript OData request

Trigger a click event on a dynamically loaded button

When using Javascript, you can expect to receive a modified structure that is different from

When utilizing AngularJS, a parse error is triggered by array[ {{value}} ], but I prefer to overlook it

Acquire by Identifier - Tonic()

"Encountered a type error: The .join method is not recognized as a function

Toggle the checkbox to either select or deselect the value

What is the best way to utilize JSON.stringify for substituting all keys and values?

Utilizing ASCX to trigger JavaScript functions within an ASPX page

Event follows activation of trigger click