Use the filter Method to Extract Data from an Array - Help with the ''easy'' part

Please see code below.

I hope to see that I got the .filter and .map parts correct

However, changing the string to a number/float, I know this can be done on a simple var by passing in into parseInt()

In the context of a big object, it is more confusing.

This challenge is asking to do too many things at the same time.


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;



filteredList = watchList.filter( (x) => x.imdbRating>=8.0 );

var mappedList = filteredList.map( (x) => { return { title:x.Title , rating:x.imdbRating}});

// Add your code above this line

console.log(filteredList); 
console.log(mappedList);

type or paste code here

Note my console.log is only showing {object Object} 4 times. The same thing happened with the previous challenge regarding use of .map to find title and imdb ratings from watchLIst but I still passed, despite the console.log showing incorrectly.

You are very close. The issue with the test not passing is that the mappedList contains the correct answers, not featuredList.

You can chain these methods together, so filter first then map:

filteredList = watchList.filter( (x) => x.imdbRating>=8.0 ).map( (x) => { return { title:x.Title , rating:x.imdbRating}});

or event neater

filteredList = watchList
  .filter(x => x.imdbRating>=8.0 )
  .map(x => ({title:x.Title , rating:x.imdbRating}));   // note I wrap the object in brackets - same as using return

Interestingly this actually works without parseInt. In javascript if one number in a >= is a number it treats the other as a number as well.

You could use parsetInt in your filter like this parseInt(x.imdbRating) >=8.0

Tip if you want to see better console logs:

  1. Download vscode : https://code.visualstudio.com/
  2. down load this extension
    3… create a new .js file
  3. highlight your code and click run code, you should see the output in the output window.
1 Like

Ah thank you for that.

How does one know when you need to combine them or not?

I thought if I filtered first, then stored it in a var say x, then used .map on that x and store it in new var say y, it would lead to the same result?

I had the same concern with the above question where eveyrthing was chained together as you explained. However, I left with the understanding that simply splitting it up like…

object.function();
object.function2();
object.function3();

was equal to

object.function().function2().function3();

(An example of above is how socialWindow was handled in the link above)

Hope what I’m asking makes sense?

No, they’re not in general equivalent

Maps and filters don’t modify the array, they return new arrays

In your code there function2 would then be done on the old version of the array

I hope that helps

As @gebulmer says your example above does not return anything so its not quite valid but you’re nearly there in you’re nearly there.

Take this example, two cases provide the same result. Chaining just avoids the need of using a intermediary variables to store the result of the filter. You don’t need this variable, instead you can just pass the result down to the next function.

Its quite a different concept so can take a while to get to grips with it. Lets look at an example:

const availableColors = ['red', 'blue', 'green', 'purple', 'orange'];
const myFavourites = ['red', 'orange', 'fusia'];

// option 1 - separate variables
const myFavsAvailable = availableColors.filter(color => myFavourites.includes(color));
const myFavsUpperCase = myFavsAvailable.map(color => color.toUpperCase());

// option 2 - chaining
const myFavUppercaseChained = availableColors
  // runs the filter, passes the result down
  .filter(color => myFavourites.includes(color)) 
  // maps get the result of the filter
  // in this case [ 'red', 'orange' ]
  .map(color => color.toUpperCase());
  // the map changes all the items of the array to uppercase
  // so after map  [ 'RED', 'ORANGE' ]

console.log(myFavsUpperCase); // [ 'RED', 'ORANGE' ]
console.log(myFavUppercaseChainged); // [ 'RED', 'ORANGE' ]

Both option 1 and 2 reuturn the same results but with option 1 we only need 1 const.

This is exactly my confusion, I was trying to do option 1 via using an intermediary var named filteredList and the final variable called mappedList?

You’re logic was correct except you were using the wrong names. The mappedList had the correct answer but the freecodecamp test looks for the answer in filteredList, hence you won’t pass. It needs to be in a specific variable.

1 Like

OH facepalm well, glad I know I got it and also now glad that I learnt how to interpret your first answer to thread which had the key to solving my confusion in the first place so swings and roundabouts. Thanks