Spread operator over an array of objects in typescript

Question

I am trying to use spread operator to find a unique set on this

let obj = {
  requests: [{
      id: 'p1',
      isOptional: false,
      item: [Object]
    },
    {
      id: 'p1',
      isOptional: false,
      item: [Object]
    }
  ]
};

// I tried below.
let output = [...new Set(obj.requests)];
console.log(output);

But that did not work.

What uniquely identifies an item in your `requests` array? The `id`? All properties? — Phil, Aug 04 '20 at 04:39
And if there's a duplicate `id`, which item should be the one kept? The first encountered, or the last? — Phil, Aug 04 '20 at 04:52
What's the obsession with spread syntax here? To directly answer your question of _"Can it be done using spread operator"_, the answer is **no** — Phil, Aug 04 '20 at 05:08

score 1 · Answer 1 · answered Aug 04 '20 at 04:58

You may get your answer to your question from here How to get distinct values from an array of objects in JavaScript?. Below is explanation why it didn't work as you have expected.

You can not find unique objects with using Set unless they both object are having same reference. So in your case it seems you are having two different references for both objects inside array. Thus Set will return 2 values.

If you are having same reference for both objects (for eg. let o = {id: 'p1',isOptional: false,item: [Object]}) and let obj = {requests: [o,o]} then it will return unique values.

You can verify the same at Set as below screenshot.

Consider below sample.

let o = {
  id: 'p1',
  isOptional: false,
  item: {
    id: 10
  }
};

let obj = {
  requests: [o, o]
}

let output = [...new Set(obj.requests)];
console.log('Output with unique reference');
console.log(output);

let o2 = {
  id: 'p1',
  isOptional: false,
  item: {
    id: 10
  }
};

let obj2 = {
  requests: [o, o2]
}
let output2 = [...new Set(obj2.requests)];
console.log('Output with different references');
console.log(output2);

Always Helping · Accepted Answer · 2020-08-04T05:01:05.623

You can do this either by using filter or spread Operator with map. Just using a spread operator with new Set will not give the desired results.

Using filter

var data = {
  requests: [{
      id: 'p1',
      isOptional: false,
      item: [Object]
    },
    {
      id: 'p1',
      isOptional: false,
      item: [Object]
    }
  ]
}

var unique = data.requests.filter(function({id}) {
  return !this[id] && (this[id] = id)
}, {})

console.log(unique )

Using Spread operator and map

var data = {
  requests: [{
      id: 'p1',
      isOptional: false,
      item: [Object]
    },
    {
      id: 'p1',
      isOptional: false,
      item: [Object]
    }
  ]
}

var unique = [...new Set(data.requests.map(({id}) => id))].map(e => data.requests.find(({id}) => id == e)); 

console.log(unique )

Yes this works well but i wanted to use spread operator here. — Prakhar, Aug 04 '20 at 04:48
@Prakhar Not just with spread operator - you have use map with that. Check now. Answer updated. — Always Helping, Aug 04 '20 at 04:53

Spread operator over an array of objects in typescript

2 Answers2