Removing duplicate objects from array by property

Question

so i have an array of objects, there are duplicate objects that contain the same id, i want to receive the first object with a unique id each time and then store that in a separate array. I Thought a map would achieve this but it dont seem to be working. I am using typescript.

My array of objects:

var infos= [

{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵", …}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 8, DepartmentId: 1, Name: "Pitched Roof Window Buying Guide", Url: "buying-guide-pitched", Html: "<div class="background-grey" style="position: rela….&nbsp;</p></div></div></div></div></div></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵", …}
{InfoPageId: 9, DepartmentId: 1, Name: "Introducing Korniche Glass Lanterns", Url: "new-in-korniche-glass-lanterns", Html: "<div class="container py-4" data-jsplus-bootstrap-…">&nbsp;</span>today!</strong></span></p></div>
↵"}
{InfoPageId: 10, DepartmentId: 1, Name: "What are Heritage Conservation Roof Windows?", Url: "new-in-heritage-conservation-roof-windows", Html: "<div class="container py-4" data-jsplus-bootstrap-…e more than happy to help you.</span></p></div>
↵"}
{InfoPageId: 10, DepartmentId: 1, Name: "What are Heritage Conservation Roof Windows?", Url: "new-in-heritage-conservation-roof-windows", Html: "<div class="container py-4" data-jsplus-bootstrap-…e more than happy to help you.</span></p></div>
↵"}
{InfoPageId: 10, DepartmentId: 1, Name: "What are Heritage Conservation Roof Windows?", Url: "new-in-heritage-conservation-roof-windows", Html: "<div class="container py-4" data-jsplus-bootstrap-…e more than happy to help you.</span></p></div>
↵"}
]

logic:

 this.getUniqueValues(this.infos, 'InfoTypeId')


  getUniqueValues(infos: Array<infoPage>, comp: string ) {

                // store the comparison  values in array
                var unique =  infos.map(e => e[comp])

                // store the indexes of the unique objects
                .map((e, i, final) => final.indexOf(e) === i && i)

                // eliminate the false indexes & return unique objects
               .filter((e) => infos[e]).map(e => infos[e]);

               console.log(unique)

}

Does this answer your question? [Remove Object from Array using JavaScript](https://stackoverflow.com/questions/10024866/remove-object-from-array-using-javascript) — Jamie Rees, May 27 '20 at 09:01

score 1 · Answer 1 · answered May 27 '20 at 09:16

How about making it unique by making use of Map:

var infos= [ {InfoPageId: 7, DepartmentId: 1 }, {InfoPageId: 8, DepartmentId: 1 }, {InfoPageId: 8, DepartmentId: 1 }, {InfoPageId: 9, DepartmentId: 1 },]
var unique = [...new Map(infos.map(val=>[val.InfoPageId, val])).values()];

console.log(unique)

score 1 · Answer 2 · answered May 27 '20 at 09:25

You can use reduce in conjunction with Object.values:

const uniqBy = (infos: InfoPage[], key: keyof InfoPage): InfoPage[] => {
  return Object.values(
    infos.reduce((unique, info) => ({
      ...unique,
      [info[key]]: unique[info[key]] || info,
    }), {} as any) // You could also improve the types of the function to get rid of the "any" but the amount of code might not be worth it
  );
};

score 0 · Answer 3 · answered May 27 '20 at 09:06

There are many ways to achieve this. What you need to do is pick on element and check is there any element with the same InfoPageId in your selected array.

var infos= [
  {InfoPageId: 7, DepartmentId: 1 },
  {InfoPageId: 8, DepartmentId: 1 },
  {InfoPageId: 8, DepartmentId: 2 },
  {InfoPageId: 9, DepartmentId: 1 },
]

const out = infos.reduce(
    (acc, cur) => acc.some(
        x => x.InfoPageId === cur.InfoPageId
    ) ? 
    acc : 
    acc.concat(cur),
    []
)

console.log(out)

In the above example I have used reduce and some. You can achieve the same with any other array looping method with the above logic.

score 0 · Answer 4 · answered May 27 '20 at 09:09

Hope this helps

var infos= [ 
  {InfoPageId: 8, DepartmentId: 1},
  {InfoPageId: 8, DepartmentId: 1},
  {InfoPageId: 8, DepartmentId: 1},
  {InfoPageId: 9, DepartmentId: 1},
  {InfoPageId: 9, DepartmentId: 1}
]

const uniqueInfos = []
const InfosMap = {}


infos.map((info) => {
  if (!InfosMap[info.InfoPageId]) {
    InfosMap[info.InfoPageId] = true
    uniqueInfos.push(info)
  }
})

console.log(uniqueInfos)

score 0 · Answer 5 · answered May 27 '20 at 09:28

0

You can use filter to achieve this as well.

let infos= [ 
  {InfoPageId: 8, DepartmentId: 1},
  {InfoPageId: 8, DepartmentId: 1},
  {InfoPageId: 8, DepartmentId: 1},
  {InfoPageId: 9, DepartmentId: 1},
  {InfoPageId: 9, DepartmentId: 1}
];

const uniqueInfos = infos.filter((infos, index, self) => self.findIndex(i => i.InfoPageId === infos.InfoPageId && i.DepartmentId === infos.DepartmentId) === index);

console.log(uniqueInfos)

answered May 27 '20 at 09:28

Andrew1325

3,519
1
14
25

when im console logging the array it is empty, i have a feeling this may be because there is so much data in the array, would i have to load it asynch.. – ashley g May 27 '20 at 09:32
Yes. If your array is being fetched from a backend you would want to wait for it to completely load before performing any functions on it. I don't use angular but I assume it has a store that could hold this array and you can then use that stored array as you need. – Andrew1325 May 27 '20 at 09:51
hmm it dont seem to be that which is the issue, i wrapped the asynchronous call in a promise to make sure that the array is loaded before doing anything. but i still have issues – ashley g May 27 '20 at 10:23
There could be an issue with how your `infos` data is structured. The double quotes in `html = "
– Andrew1325 May 27 '20 at 20:07

score 0 · Answer 6 · answered May 27 '20 at 09:43

Simplest Solution would be to iterate through all items and keep a object of already processed items. and don't add already processed to new array.

public findUnique(data: any[], key: string): any[] {
  var result = [];
  var processedData = {};
  any.forEach((item) => {
     if(!processedData[item["key"]]) {
          result.push(item);
          processedData[item[key]] = true;
     }
  }
  return result;
}

Removing duplicate objects from array by property

6 Answers6