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 — Jamie Rees
– Jamie Rees, Commented May 27, 2020 at 9:01

Rajneesh · Accepted Answer · 2020-05-27 09:16:47Z

1

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)

answered May 27, 2020 at 9:16

Rajneesh

5,3181 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ján Jakub Naništa · Accepted Answer · 2020-05-27 09:25:52Z

1

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
  );
};

answered May 27, 2020 at 9:25

Ján Jakub Naništa

1,94611 silver badges12 bronze badges

Comments

Ashish · Accepted Answer · 2020-05-27 09:06:24Z

0

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.

answered May 27, 2020 at 9:06

Ashish

4,3701 gold badge19 silver badges46 bronze badges

Comments

Atishay Jain · Accepted Answer · 2020-05-27 09:09:16Z

0

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)

answered May 27, 2020 at 9:09

Atishay Jain

1,44513 silver badges24 bronze badges

Comments

Andrew1325 · Accepted Answer · 2020-05-27 09:28:52Z

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, 2020 at 9:28

Andrew1325

3,5791 gold badge18 silver badges25 bronze badges

4 Comments

ashley g Over a year ago

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..

Andrew1325 Over a year ago

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.

ashley g Over a year ago

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

Andrew1325 Over a year ago

There could be an issue with how your infos data is structured. The double quotes in html = "<div class="background-grey" style="position: re...etc"" could be making the infos array throw a syntax error. Is there any way you can change it to "<div class='background-grey' style='position: re... etc'", ie with single quotes in the html string?

Aakash Garg · Accepted Answer · 2020-05-27 09:43:27Z

0

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;
}

answered May 27, 2020 at 9:43

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Removing duplicate objects from array by property

6 Answers 6

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related