Use the filter method to extract data from an array (for me)

JavaScript
1

Tell us what’s happening:
For the line in my code:
“var filteredList = watchList.map(movie => movie.title, movie.imdbRating);”

Why is it telling me that “movie” is not defined?
In other lessons, I saw “user” or “item” being used and was not defined.
I included some code from the same lesson where “user” is not defined.
Why does it matter here?
Please explain.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

// the global variable
var watchList = [
  {
    "Title": "Inception",
    "Year": "2010",
    "Rated": "PG-13",
    "Released": "16 Jul 2010",
    "Runtime": "148 min",
    "Genre": "Action, Adventure, Crime",
    "Director": "Christopher Nolan",
    "Writer": "Christopher Nolan",
    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy",
    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
    "Language": "English, Japanese, French",
    "Country": "USA, UK",
    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
    "Metascore": "74",
    "imdbRating": "8.8",
    "imdbVotes": "1,446,708",
    "imdbID": "tt1375666",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "Interstellar",
    "Year": "2014",
    "Rated": "PG-13",
    "Released": "07 Nov 2014",
    "Runtime": "169 min",
    "Genre": "Adventure, Drama, Sci-Fi",
    "Director": "Christopher Nolan",
    "Writer": "Jonathan Nolan, Christopher Nolan",
    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
    "Language": "English",
    "Country": "USA, UK",
    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
    "Metascore": "74",
    "imdbRating": "8.6",
    "imdbVotes": "910,366",
    "imdbID": "tt0816692",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "The Dark Knight",
    "Year": "2008",
    "Rated": "PG-13",
    "Released": "18 Jul 2008",
    "Runtime": "152 min",
    "Genre": "Action, Adventure, Crime",
    "Director": "Christopher Nolan",
    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
    "Language": "English, Mandarin",
    "Country": "USA, UK",
    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
    "Metascore": "82",
    "imdbRating": "9.0",
    "imdbVotes": "1,652,832",
    "imdbID": "tt0468569",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "Batman Begins",
    "Year": "2005",
    "Rated": "PG-13",
    "Released": "15 Jun 2005",
    "Runtime": "140 min",
    "Genre": "Action, Adventure",
    "Director": "Christopher Nolan",
    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
    "Language": "English, Urdu, Mandarin",
    "Country": "USA, UK",
    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
    "Metascore": "70",
    "imdbRating": "8.3",
    "imdbVotes": "972,584",
    "imdbID": "tt0372784",
    "Type": "movie",
    "Response": "True"
  },
  {
    "Title": "Avatar",
    "Year": "2009",
    "Rated": "PG-13",
    "Released": "18 Dec 2009",
    "Runtime": "162 min",
    "Genre": "Action, Adventure, Fantasy",
    "Director": "James Cameron",
    "Writer": "James Cameron",
    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
    "Language": "English, Spanish",
    "Country": "USA, UK",
    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
    "Metascore": "83",
    "imdbRating": "7.9",
    "imdbVotes": "876,575",
    "imdbID": "tt0499549",
    "Type": "movie",
    "Response": "True"
  }
];

// Add your code below this line

var filteredList = watchList.map(movie => movie.title, movie.imdbRating);

// Add your code above this line

console.log(filteredList);


const users = [
{name: 'John', age: 34},
{name: 'Amy', age: 20},
{name: 'campercat', age: 10}
];

const usersUnder30 = users.filter(user => user.age < 30);
console.log(userUnder30);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36.

Challenge: Use the filter Method to Extract Data from an Array

Link to the challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array

2

How do you expect this return value to work in your map function?

3

“Use a combination of filter and map on watchList to assign a new array of objects with only title and rating keys.”

As ArielLeslie seems to be suggesting, your map function callback is not returning a valid expression such as an object.

4

put like this, movie => movie.title is the first argument of the map method, it’s a function that will return the value of the title property - movie is defined because it is function parameter.
Then after the comma there is movie.imdbRating, this is the second argument of the map method, here there is no movie variable defined anywhere, so it is not possible to get a property of something that is undefined

tldr: parenthesis are important

6

I looked at the solution and coming up with such a solution has not been discussed. Perhaps I missed something. Where was it discussed to put the following solution together in the material?
I couldn’t come up with the following solution based on what has been taught up to this lesson.
Please explain line by line how this works.
why is “return” used? It is not a function.
Did I need to look up “parseFloat()” online to
be able to come up with this solution?
“movie” is a type in the object.
How does it know title is associated with “movie” as
“movie” is not a property of the object.
“movie” belongs to the property “Type”.
“movie.title” makes no sense as “movie.imdbRating” makes
no sense as the object name is “watchList” not “movie”.
“movie.rating” doesn’t exist. “rating” is not a property of
the object.

I have found this section on “Functional Programming” to
be so confusing. Any suggestions?

var filteredList = watchList
  .map(movie => {
    return {
      title: movie.Title,
      rating: movie.imdbRating
    };
  })
  .filter(movie => {
    // return true it will keep the item
    // return false it will reject the item
    return parseFloat(movie.rating) >= 8.0;
  });
7

this is the function that was passed as argument of map, it is arrow syntax, taught in the ES6 section (using the syntax with function keyword works the same in case you avoided that section)

map was discussed two challenges ago

map takes each element of the array on which it is used, pass it through the function, and put the result in a new array
so movie is one element of the array, which is an object and has properties

parseFloat is actually not needed, as javascript can take the string of a number and treat it as a number when using >=

it was created by the map method, the array returned by map has objects with only two properties: a rating property and a title property - so now inside the filter method, that’s what movie is, each one of those objects with only two properties

in this challenge it explains that filter takes a callback and returns a new array with included those elements that returns true when passed in the callback, and leave out those that return false

8

Hey there,

let’s say you have a box of movies in real life.

When a friend asks you to give you one of them,
they could say:

  • give me one
  • give me one of them
  • give me one of these things
  • give me one movie
  • give me one DVD
  • give me one disc

As long as both of you know what you mean, this will work.

map and filter both use a similar system.

boxOfMovies.map(movie => movie.title)
boxOfMovies.map(one => one.title)
boxOfMovies.map(x => x.title)
boxOfMovies.map(whateverYouLike => whateverYouLike.title)

You are using a temporary name to have access to this specific thing.
After you have decided on a name for this specific thing, you now can take its title.
map and filter both do this for every element of the original array.
In the code example, you return the title of every element of the original array.