removing duplicate objects from an array

Question

I have been working on removing duplicate objects in an array. I keep getting an error on trying to read the filterList[i+1].tagID. I can manually enter the [i+1] values and get the correct results. I'm not sure why the i+1 is an issue. I have also wondered if if it better to use a slice[i, 1] than the delete.

const filterList = [{
 tagID: 1,
 tagName: "Red"
}, {
 tagID: 1,
 tagName: "Red"
}, {
 tagID: 2,
 tagName: "Orange"
}, {
 tagID: 2,
 tagName: "Orange"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 6,
 tagName: "Indigo"
}, {
 tagID: 6,
 tagName: "Indigo"
}, {
 tagID: 7,
 tagName: "Violet"
}, {
 tagID: 7,
 tagName: "Violet"
}, {
 tagID: 7,
 tagName: "Violet"
}]
filterList.sort(function(a, b) {
 return a.tagID - b.tagID;
});
for (let i = 0; i < filterList.length; i++) {
 if (filterList[i].tagId == filterList[i+1].tagID) {
 delete filterList[i];
 }
}
console.log(filterList)

• Joe: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
• Mohsin Mehmood: Changed loop till filterList.length - 1 for (let i = 0; i < filterList.length-1; i++) { if (filterList[i].tagId == filterList[i+1].tagID) { delete filterList[i]; } }

Answer 1

Try this! Using filter and es2015

const filterListResult = filterList.filter((item, index, self) => index === self.findIndex((t) => (t.tagID === item.tagID && t.tagName === item.tagName)));
console.log(filterListResult);

<script>
const filterList = [{
 tagID: 1,
 tagName: "Red"
}, {
 tagID: 1,
 tagName: "Red"
}, {
 tagID: 2,
 tagName: "Orange"
}, {
 tagID: 2,
 tagName: "Orange"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 6,
 tagName: "Indigo"
}, {
 tagID: 6,
 tagName: "Indigo"
}, {
 tagID: 7,
 tagName: "Violet"
}, {
 tagID: 7,
 tagName: "Violet"
}, {
 tagID: 7,
 tagName: "Violet"
}]
</script>

Answer 2

You can use the set object to remove duplicate IDs, then use map and find functions to mutate the result to give you only the first appearance of each tagID.

 Array.from(new Set(filterList.map(_=> _.tagID)))
 .map(ID=> filterList.find(o=> o.tagID === ID)));

const filterList = [{
 tagID: 1,
 tagName: "Red"
}, {
 tagID: 1,
 tagName: "Red"
}, {
 tagID: 2,
 tagName: "Orange"
}, {
 tagID: 2,
 tagName: "Orange"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 5,
 tagName: "Blue"
}, {
 tagID: 6,
 tagName: "Indigo"
}, {
 tagID: 6,
 tagName: "Indigo"
}, {
 tagID: 7,
 tagName: "Violet"
}, {
 tagID: 7,
 tagName: "Violet"
}, {
 tagID: 7,
 tagName: "Violet"
}]
let result = Array.from(new Set(filterList.map(_ => _.tagID))).map((ID, index) => filterList.find(o => o.tagID == ID));
console.log(result);

Answer 3

You could start the iteration from index 1 and check the last element with the actual element.

const filterList = [{ tagID: 1, tagName: "Red" }, { tagID: 1, tagName: "Red" }, { tagID: 2, tagName: "Orange" }, { tagID: 2, tagName: "Orange" }, { tagID: 5, tagName: "Blue" }, { tagID: 5, tagName: "Blue" }, { tagID: 5, tagName: "Blue" }, { tagID: 6, tagName: "Indigo" }, { tagID: 6, tagName: "Indigo" }, { tagID: 7, tagName: "Violet" }, { tagID: 7, tagName: "Violet" }, { tagID: 7, tagName: "Violet" }]
filterList.sort(function(a, b) {
 return a.tagID - b.tagID;
});
for (let i = 1; i < filterList.length; i++) {
 if (filterList[i - 1].tagId === filterList[i].tagID) {
 delete filterList[i];
 }
}
console.log(filterList);

Answer 4

Generate a new list using reduce:

const filterList = [{ tagID: 1, tagName: "Red" }, { tagID: 1, tagName: "Red" }, { tagID: 2, tagName: "Orange" }, { tagID: 2, tagName: "Orange" }, { tagID: 5, tagName: "Blue" }, { tagID: 5, tagName: "Blue" }, { tagID: 5, tagName: "Blue" }, { tagID: 6, tagName: "Indigo" }, { tagID: 6, tagName: "Indigo" }, { tagID: 7, tagName: "Violet" }, { tagID: 7, tagName: "Violet" }, { tagID: 7, tagName: "Violet" }]
const newList = filterList.reduce((total, current) => {
 const exist = total.some(t => t.tagID === current.tagID)
 if (!exist) {
 total.push(current)
 }
 return total
}, [])

• Jeff Winkler: You lost me on "actual". Where does this come from?
• Jean: sorry I had called the current variable from actual before and forgot to replace it later