Help with the filter Method to extract data from an array

JavaScript
1

Hello, when I click the Help button it says that there is a 414 Request Error. Therefore, I have posted the link to my challenge below and my code below that.

I am not passing any of the tests and I’m not sure what I am missing. I read docs about filter() and map() and I think I have everything in order, but I’d like some direction about where I’m going wrong.

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

var filteredList = watchList(title, imdbRating);
var finalList = filteredList.map((imdbRating) =>
{
finalList.parseInt((imdbRating) >= 8.0);
});
return finalList;

2

What does this:

var filteredList = watchList(title, imdbRating);

…do? It’s not a function. This line does nothing.

And filteredList.map is not a method. You want to apply that to *watchList`. And you want to return it into filteredList. There is no need for the finalList variable.

OK, so your callback function:

(imdbRating) => {
  finalList.parseInt((imdbRating) >= 8.0);
});

A few problems here. map isn’t going to send you the imdbRating. And map isn’t even what you want here - you’re doing the test for filtering. It’s going to send you the entire film record. The idea behind finalList.parseInt((imdbRating) >= 8.0); is partially right. Except there is no need for finalList in there - get rid of it. And don’t forget to return that boolean value. Since you have put in a code block (curly braces) you need return. And don’t for get that imdbRating will be a property on what filter sends you, whatever you decide to call it.

So, that gets the filter working. Get that working first. That will filter the ones with low ratings. Then you need tomap the results of that the data shape you want. These could technically be done in either order but I think it’s a tad more efficient to do the filter first so you don’t map data you’re just going to throw away anyway. These two methods can be chained together or it can be done in two steps.

4

I GOT IT! I GOT IT!

Okay. Don’t scroll down if you don’t want a spoiler, but I’m posting a solution so I can work through my work with somebody and make sure I understand the logic.

Here goes. I have some content clarification questions as I go.

var filteredList = watchList.filter(myFilm => (parseInt(myFilm["imdbRating"]) >= 8)).map(myFilm  => ({title: myFilm.Title, rating: myFilm.imdbRating}));
  1. I started off with filter() but as I understand it map() and filter() can be used in either order. Is this a correct statement?

2.I filtered using the function myFilm (in ES6) and converted the string into numbers first with parseInt and did this using bracket notation. I enclosed this withing in parentheses so that the entire process could be filtered out to be greater than or equal to 8. (The decimal point I’ve read doesn’t really matter in JS if it’s zero).

  1. I linked this filtering to my mapping of the title and rating from watchList array. Since I did filter() first, the map() function inherits the process of filtering ratings that are greater than or equal to 8. Is “inherit” the correct word to use here? I used dot notation because that’s what I used in the previous map() challenge. Yet, I tried out bracket notation and I also passed (I just needed to reformat my props as a string. Is there any particular approach I should be using here? Are there any scenarios similar to this challenge where one approach would make a difference over another?

Thanks for anybody taking the time to answer my questions.

5

I wrapped your answer in [spoiler] and [/spoiler] tags - that keeps people from seeing the answer unless they want to.

I started off with filter() but as I understand it map() and filter() can be used in either order. Is this a correct statement?

Yes. I think it is slightly more efficient to filter first so you don’t have to map values you will throw away any way, but you will get the correct answer either way. It won’t matter much in this case, but in large data sets, it might. It’s good to start thinking that way.

Your filtering is basically right. I would just make few suggestions.

parseInt(myFilm["imdbRating"])

First of all, it should be parseFloat. Since you are checking it against 8.0, which is essentially an integer, it works because parseInt will just round down to the nearest integer. So, it works here, but wouldn’t work if it were an actual floating number you were comparing it to.

Secondly, it would be more common to write myFilm["imdbRating"] as myFilm.imdbRating. The bracket notation is used if the property is not a proper JavaScript identifier, like if it has a space or is a variable.

But this works and will give the correct result.

The map function is flawless.

I linked this filtering to my mapping of the title and rating from watchList array. Since I did filter() first, the map() function inherits the process of filtering ratings that are greater than or equal to 8

Yes, the results of the filter get fed into the map.

Is “inherit” the correct word to use here?

The technical term is “chaining” or “cascading” methods. You could have broken this into two steps, but as long as it’s clear, chaining is cool.

For clarity, I might have formatted it as:

const filteredList = watchList.filter(f => (parseFloat(f.imdbRating) >= 8.0))
  .map(f => ({ title: f.Title, rating: f.imdbRating }));

or something like that. If the callbacks were more complicated, I might have put them in their own function, but these are probably simple enough. It’s common in a simple callback to use a one letter variable name. I chose “f” for “film”. But it isn’t required.

I used dot notation because that’s what I used in the previous map() challenge. Yet, I tried out bracket notation and I also passed …

Yes, bracket notation will always work. But generally is if the property is not a variable and is a valid JS identifier, the dot notation is preferred as it is cleaner and easier to read.

But, great work. Keep it up. This is confusing stuff and it’s great when it finally starts to click. Remember that feeling - there will be more things like this, but if you keep at it, you’ll get them.