Why my code is not working? Use the filter Method to Extract Data from an Array

Why my code is not working? Use the filter Method to Extract Data from an Array
0

#1

Why my code is not working and I am getting error after so much hard work ?

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



console.log(filteredList);

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


#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

You’re right that you can chain map and filter but you should be aware of what comes out of each to put into the next

Think about what the result of the map looks like, it’s an array of objects. Do these objects ever have the property imdbRating?

For what it’s worth in this case I personally think it’s better to filter before the map, it should do less work


#4

Adding to what @gebulmer asks about the objects of the mapped array having a property of imdbRating. Your map creates a new array of objects with two properties (title and rating), so the filter needs to refer to one of these properties instead of to the properties that were apart of the objects in the original watchList array.


#5
var filteredList = watchList.filter((item) => ({rating: item.imdbRating})).map((item) => ({title: item.Title, rating: item.imdbRating >= 8.0}))

I have rewrite my code this way but still its not working


#6

Take a look at what you’ve got as the argument to filter now, it’s not right

Edit: same with map, be sure to remember what each argument to those should look like


#7

Filter should return a true or false value to “keep” the desired element being iterated over. Your filter returns an object which which is a “truthy” value, so all the movie objects will be kept. Your map ends up returning something like:

[ { title: ‘Inception’, rating: true },
{ title: ‘Interstellar’, rating: true },
{ title: ‘The Dark Knight’, rating: true },
{ title: ‘Batman Begins’, rating: true },
{ title: ‘Avatar’, rating: false } ]


#8

Sorry guys, I completely lost and still can’t figure out


#9

It is times like these when you need to learn how to debug your code. Let’s go back to the original code you posted. Break your current code down into two parts. First use map to create the new array and console.log it, then use filter and console.log it.

var mappedWatchList = watchList.map((item) => ({title: item.Title, rating: item.imdbRating}));
console.log(mappedWatchList);

var filteredMap = mappedWatchList.filter((item) => (item.imdbRating >= 8.0));
console.log(filteredMap);

The above code will display the following to the console:
[ { title: ‘Inception’, rating: ‘8.8’ },
{ title: ‘Interstellar’, rating: ‘8.6’ },
{ title: ‘The Dark Knight’, rating: ‘9.0’ },
{ title: ‘Batman Begins’, rating: ‘8.3’ },
{ title: ‘Avatar’, rating: ‘7.9’ } ]

[]

The first array shown above is the result of the map. The second array is the result of the filter (which is what you are returning with the chained functions). See how each object does not have a property named imbRating. Instead, each object has a ‘title’ property and a ‘rating’ property, so your filter needs to refer to a valid property in the mapped array’s objects.

If we given you any more hints, we would be giving you the answer. Your first code is 99% complete. You just need to refer to a valid property of the objects in the mapped array.


#10

Thank you guys, I arrived at correct solution and below code is working. You are right @randelldawson , I learnt a lot about filter and map now. many thanks

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

#11

I have one more question, why we don’t filter “title” in filter function and only use “rating” in filter ?


#12

In your solution, you are first using the .filter method to filter the list by imdbRating, which is what the asked. You could add a filter to look for “titles” that match a keyword or regular expression, but that is not what the problem was trying to get you to do.

Alternatively you could have first used the .map method to extract the “title” and “imdbRating” from the “watchList” and then filtered it. But you will have to keep in mind that if you use the 2nd method, which arguments are you passing into the .filter method; the original “watchList”, or the new listed created by .map.


#13

Thank you randelldawson. I was having a similar issue with setting up the the problem and your explanation really helped.