Functional Programming: Use the filter Method to Extract Data from an Array [SOLVED]

Can anyone give me an example on how to combine .filter and .map function?
I am stuck in this challlenge : https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array

// 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.filter((elem) => Number(elem.imdbRating >= 8.0).map((x) => ({title: x.Title, rating: filterfilter})));

// Add your code above this line

console.log(filteredList); 

A quick example would do as long as it combines .filter and .map function so I have an idea on how to do it with this challenge. Thanks

Based on your question I assume you don’t want any spoilers on the answer (assuming you haven’t solved it yet)?
You could split the challenge in two parts:

  1. filter for movies with rating of 8.0+
  2. from the filtered selection get title and rating

To obtain the array that you want to return, you will first have to use the .filter() method and then you will have to map the new array using .map() to exclude information that is not title or rating.

I hope this helps?

edit:

For examples on how these methods are applied its best to look into the official documentation:


2 Likes

You are actually not too far off, first let’s separate the methods and take a look at your filtering,

var filteredList = watchList.filter((elem) => Number(elem.imdbRating >= 8.0)

here you are missing a parentheses to close out your filter method, closing the parentheses should correctly return your filtered array by rating. *

Next look at your map

map((x) => ({title: x.Title, rating: filterfilter})))

Here you have 2 issues, first you have an extra parentheses , take it out. Second, while the title property is returning the correcting thing the rating property is not, adjust that to return the imdb rating in the same way that you did for the title property and you should be good to go.**

*FYI, I am not a big fan of the way you filtered but it works because it applies the number method to a boolean always returning 0 or 1 , but it is comparing a string to a number, personally I would rather have this Number(elem.imdbRating) >= 8.0 , which will just return a boolean.

**FYI, you don’t necessarily have to filter first and then map, you can also do it the other way, i.e. map and then filter

1 Like

@Tomvbe Thanks for understanding. Yes, I don’t want any spoilers on the answers. I followed your advice and I did solve it.

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

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

console.log(mappedList);

Can’t believe I can do it like this. So many ways to answers one challenge. Again, Thank you

SPOILER!

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

Instead of announcing “SPOILER” one line above the spoiler you could also use the spoiler tags by wrapping your code with [spoiler] tags.

This worked for me:

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

You have to filter for imdbRating >= than 8 and after simply filter like a couple of challenges before:

var filteredList = watchList
.filter(movie => parseInt(movie.imdbRating) >= 8.0)
.map(movie => ({
title: movie.Title, rating: movie.imdbRating
}))

Hope this helps someone.

SPOILER ALERT

var filteredList1 = watchList.filter(function(val) {
  return val.imdbRating>=8.0;
});

var filteredList = filteredList1.map(function(val) {
  return {title: val.Title, rating: val.imdbRating};
})

The Best one which i thought
var filteredList=watchList.filter(word=> word[“imdbRating”]>8.0).map(function(i){return {title:i[‘Title’],rating:i[‘imdbRating’]}});