How to filter an array of objects only by name property? - Javascript

Question

I have this array of objects called movies and I would like to create a new array only with the name property, I've used the forEach method but I need to do it with the filter method:

Expected output with filter method:

[ 'Jumanji', 'Harry P', 'Toy Story' ]

let movies = [
  {
    'name': 'Jumanji',
    'duration': 120
  },
  {
    'name': 'Harry P',
    'duration': 60
  },
  {
    'name': 'Toy Story',
    'duration': 240
  }
];

let movies_names = [];
movies.forEach(movie => {
    movies_names.push(movie.name);
});

console.log('movies_names', movies_names)

With filter method I'm able to see the names but when I return them I see the original array.

let movies = [
  {
    'name': 'Jumanji',
    'duration': 120
  },
  {
    'name': 'Harry P',
    'duration': 60
  },
  {
    'name': 'Toy Story',
    'duration': 240
  }
];

let newAr = movies.filter((item, index, arr) => {
  console.log('item', item.name)
  return item.name
  // console.log('index', index)
  // console.log('arr', arr.name)
})


console.log('newAr', newAr)

What am I missing?

Filter is for filtering certain elements from the array depending on a condition and you should return a boolean value from the predicate, in this case all names are truthy so you get back the original array. What you are actually looking for is the map function. — Berk Kurkcuoglu, Apr 09 '21 at 16:00
Where did you get the idea that `.filter()` - _"The `filter()` method creates a new array with all elements that pass the test implemented by the provided function."_ - is the right tool? — Andreas, Apr 09 '21 at 16:01
@Andres You didn't understand Berk's question, filtering is done by using a condition, like Andreas said, you're probably not filtering the array at all. — Teemu, Apr 09 '21 at 16:01
With the expected output this is a perfect dupe of: [From an array of objects, extract value of a property as array](https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array) - But why do you ask for `.filter()`? o.O — Andreas, Apr 09 '21 at 16:04
@Andreas I thought there was a way with filter function to only filter by name — Andres, Apr 09 '21 at 16:06

Taki · Accepted Answer · 2021-04-09T16:00:13.047

2

Array.filter will filter the array removing unwanted items, You're looking for Array.map to keep the same array length changing the value of each element of the array :

let movies = [{
    'name': 'Jumanji',
    'duration': 120
  },
  {
    'name': 'Harry P',
    'duration': 60
  },
  {
    'name': 'Toy Story',
    'duration': 240
  }
];

let newAr = movies.map((item, index, arr) => {
  return item.name
})


console.log('newAr', newAr)

edited Apr 09 '21 at 16:00

answered Apr 09 '21 at 15:58

Taki

17,320
4
26
47

Thanks @Taki but is there a way to do it with filter method? – Andres Apr 09 '21 at 15:59
1

@Andres , i edited the answer, `Array.filter` removes unwanted items, it's not doing what you're expecting – Taki Apr 09 '21 at 16:01
Why didn't you vote to close as dupe of: [From an array of objects, extract value of a property as array](https://stackoverflow.com/questions/19590865/from-an-array-of-objects-extract-value-of-a-property-as-array) – Andreas Apr 09 '21 at 16:02

Ravi Chaudhary · Answer 2 · 2021-04-09T16:10:03.490

What you would want to use is map but reduce would also do the job. To know more about which one to use when checkout this post

let movies = [
  {
    'name': 'Jumanji',
    'duration': 120
  },
  {
    'name': 'Harry P',
    'duration': 60
  },
  {
    'name': 'Toy Story',
    'duration': 240
  }
];

const newMoviesArrUsingMap = movies.map(cur => cur.name);
const newMoviesArrUsingReduce = movies.reduce((acc,cur) => [...acc, cur.name], []);

console.log(newMoviesArrUsingMap);
console.log(newMoviesArrUsingReduce);

score 0 · Answer 3 · answered Apr 09 '21 at 16:01

Try this:

let movies = [
  {
    'name': 'Jumanji',
    'duration': 120
  },
  {
    'name': 'Harry P',
    'duration': 60
  },
  {
    'name': 'Toy Story',
    'duration': 240
  }
];
movies_names = movies.map(movie=>movie.name)
console.log(movies_names)

score 0 · Answer 4 · answered Apr 09 '21 at 16:01

This prblem fit with map method: Map W3Schools doc

let movies = [
  {
    'name': 'Jumanji',
    'duration': 120
  },
  {
    'name': 'Harry P',
    'duration': 60
  },
  {
    'name': 'Toy Story',
    'duration': 240
  }
];

let newAr = movies.map(item => item.name)

console.log(newAr)

How to filter an array of objects only by name property? - Javascript

4 Answers4