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((one)=>{return Number(one.imdbRating)>=8.0})
.map((one)=>{{title:one.Title;rating:one.imdbRating}});

// Add your code above this line

console.log(filteredList);

I print it on console, but the result is undefined.
what happened?
when I print
watchList
.filter((one)=>{console.log(one.imdbRating);return Number(one.imdbRating)>=8.0});

the watchList has value.

but when I try
var filteredList = watchList
.filter((one)=>{return Number(one.imdbRating)>=8.0})
.map((one)=>{{title:one.Title;rating:one.imdbRating}});
the filteredList is still undefined.

You are almost there. You made two minor mistakes.
The problems are in the second line where you are mapping the objects. You are mapping the array but not returning it. For this reason you get “undefined”. Just as you did on the first line with your filter callback function, you have to return your function. After adjusting this, you will notice an error as well because the separation between your title and rating should not be “;” but just a comma “,” as you are within an object.

1 Like

You’re pretty close to a solution. I believe your code still has two problems, both of which are in your .map() function. I’ll give you some hints:

First, arrow functions only have implicit return when the function body is not a block. So something like

myArray.map(obj=> obj.prop)

will work just fine, but this

myArray.map((obj) => { obj.prop; })

will not. It will just give you an array full of undefined because nothing is returned from the arrow function.

Second, there’s a problem with the object literal you create in the .map() function. Here’s what a good object literal looks like:

let myObj = { prop1: 'stuff' , prop2 : 'more stuff' };

Compare that with yours and I think you’ll find the issue.

Hope this helps. Good luck going forward.

1 Like

Thanks very much, I finally did it.
var filteredList = watchList.filter((elem) => Number(elem.imdbRating >= 8.0)).map((x) =>{let obj ={title: x.Title , rating: x.imdbRating};return obj;});

I thinks the mainly problem is what your talked about the format of the map.
I don’t know when I should add a block.

Like this time, first I tryed
var filteredList = watchList.filter((elem) => Number(elem.imdbRating >= 8.0)).map(x =>{title: x.Title , rating: x.imdbRating});

But it even can’t compile, is it because the every time JS saw the {} , it will think there are multiple lines with return?

Thanks for your advise, I passed it. I thought I just miss understand the format of the map.

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

I believe that if you use this, the problem is with map(). The js interpreter doesn’t know if the { is the start of an object literal or a block of code. I believe you could fix it by placing parentheses around the object literal, like this ({title: x.Title , rating: x.imdbRating}). You might want to give that a try; I think it would pass.

Thanks again, but it doesn’t pass too. I even run it on console.

There is an error:
Uncaught SyntaxError: Unexpected token :

Sorry, I wasn’t clear. My point was that if you use this as your map function, it won’t work:

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

But if you use this, it will work (I just tested it):

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

The only difference is that in the 2nd one I’ve added parentheses around the object literal, so now the interpreter knows it’s an object and not a code block.

Anyway, it’s not a big deal, but it was something I’ve never been clear on with arrow functions, so I’m glad to have my head around it now.

1 Like

Oh, you right, it works.

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

but why does this not work?

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

it is more conform to

myArray.map((obj) => { obj.prop; })

When the interpreter sees a { in an arrow function, it assumes that that is the start of a code block. If you want to return something from inside a block you must use an explicit return statement.

Thank you!!!

when I add return it works.

You are amazing, how do you know this explicit area so much!!!

I now understand meaning of () and {} to compile. () is used for a parameter, and {} is used for a code block .

:grin:

Cool. Glad to be of help. If you’d like a reference for this, I learned the details from MDN:

The sections “Basic Syntax” and “Returning object literals” are particularly helpful for your particular case, but the whole page is informative. They’ve got translations in a number of different languages too, just in case English isn’t your native language. Happy reading.

1 Like

Thank you

I never thought to read syntax part before! I only looked the examples, then I code. Actually, I think it’s important too.