Map and Filter mapped array in Javascript

Question

This a very simple question. I want to map and form an array given another array. then I would like to remove the duplicated values.

this is what I did:

let status = listHotels.map(hotel => {
  return hotel.status
})

const x = status.filter((v, i) => (
  status.indexOf(v) === i
));

It works. But I would like a solution that doesn't involve writing two blocks of code. I tried this:

let status = listHotels.map(hotel => {
  return hotel.status
}).filter((v, i) => (
  status.indexOf(v) === i
));

But it didnt work. It says

Cannot read property 'indexOf' of undefined

Does anyone know a workaround this?

status will only be assigned once all chained methods have executed, with the result of the last chained method. So you attempting to access status inside a chained method before it has been assigned. — ste2425
– ste2425, Commented Dec 17, 2018 at 14:41
Why would you filter ? Because your statement array.indexOf(v) === i will always return true... — ChrisR
– ChrisR, Commented Dec 17, 2018 at 14:41
No it wont @ChrisR. It's a common way to remove duplicates from the array. — Blue
– Blue, Commented Dec 17, 2018 at 14:42

Karim · Accepted Answer · 2020-09-15 10:25:43Z

9

status is still not defined when you call the .filter method.

change your code to:

const listHotels = [{status:'s1'}, {status:'s1'}, {status:'s2'}]
let status = listHotels.map(hotel => {
  return hotel.status
}).filter((v, i, currentStatus) => (
  currentStatus.indexOf(v) === i
));
console.log(status);

edited Sep 15, 2020 at 10:25

answered Dec 17, 2018 at 14:38

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

Comments

Blue · Accepted Answer · 2018-12-17 14:39:23Z

2

You can do this using findIndex, passing a function to compare statuses, and swapping filter/map around:

const listHotels = [{status: 'bad'}, {status: 'good'}, {status: 'bad'}];

let status = listHotels.filter((v, i) =>
  listHotels.findIndex(v2 => v.status === v2.status) === i
).map(hotel => hotel.status);

console.log(status);

answered Dec 17, 2018 at 14:39

Blue

23k7 gold badges69 silver badges102 bronze badges

Comments

chazsolo · Accepted Answer · 2018-12-17 14:43:56Z

1

Since you are using let and const I'm assuming you can also use ES6 Set:

const data = [{
  status: 'one',
  id: 1
}, {
  status: 'one',
  id: 2
}, {
  status: 'two',
  id: 3
}, {
  status: 'two',
  id: 4
}]

const uniqueStatus = [...new Set(data.map(({
  status
}) => status))]

console.log(uniqueStatus)

Passing the mapped array into Set will ensure uniqueness. You can destructure the Set back into an array.

answered Dec 17, 2018 at 14:43

chazsolo

8,6541 gold badge25 silver badges45 bronze badges

Comments

Mamun · Accepted Answer · 2018-12-18 04:07:11Z

1

status is not ready yet (undefined) to access inside the filter(). But in the first solution, map() returns and stores result in status which makes the variable available in the later statements.

You can pass the array itself as the third parameter to use in the filter(). You also do not need to use unnecessary return statement here:

var listHotels = [{status:'a'}, {status:'b'}, {status:'a'}]

let status = listHotels.map(hotel => hotel.status)
                       .filter((v, i, arr) => arr.indexOf(v) === i);
console.log(status);

edited Dec 18, 2018 at 4:07

answered Dec 17, 2018 at 14:41

Mamun

69k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Map and Filter mapped array in Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related