Use the filter Method to Extract Data from an Array / map issue

Hello, so I have an array which holds objects with information in strings. I want to convert some strings to numbers using map method and without any for loops.

var filteredList = watchList.map(num => Number(watchList['imdbRating']));

My question would be: where to put num after arrow? I mean, how to target those values that I want to change?
Thank You!

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

when you ask for help for a challenge, please provide the link to that challenge.

in the way you have written it, num is each element in the watchList array, which is then substituted by Number(watchList['imdbRating']); are you sure that is the correct way of accessing properties?

Number(watchList['imdbRating']) is undefined right now.

If num is an element inside the array, how can you access the property of that object?

map just runs that callback function on every element, so num is the current element in the array. It isn’t really num, I think your naming is confusing things slightly: it’s whatever the current object is.

It’s easier if you think about how you’d write a function to turn the imdbRating into a number for one object. The rules are that the function must take the object and must return the [modified] object.

Then once you can do that, you can use map to do the same thing for every object. One way (which directly modifies the item):

function convertImdbRatingToNum(film) {
  film.imdbRating = Number(film.imdbRating);
  return film;
}

So now you can convert one, you can convert all of them:

watchList.map(film => convertImdbRatingToNum(film));

or, same thing:

watchList.map(convertImdbRatingToNum);

or, inline:

watchList.map(film => {
  film.imdbRating = Number(film.imdbRating);
  return film;
});

or, using the function keyword (just for completeness):

watchList.map(function(film) {
  film.imdbRating = Number(film.imdbRating);
  return film;
});

or, more advanced, using object spread syntax (becomes a bit cryptic, but it’s much shorter). Note also using + in place of Number (does the same thing):

watchList.map(film => ({imdbRating: +film.imdbRating, ...film}));
2 Likes

These examples really helped me to understand and make it work. Thank you!

1 Like

It’s really helpful when you’re using any of the array iteration methods that take a callback (so map, filter, find, findIndex, every, some, forEach) to just write that callback function on its own and test it on one value to check its doing what you want it to do.

Normal process I’d go through if I wasn’t sure is

  1. look on MDN at the array method, see what the callback has to return. Say it’s filter and I want to filter out odd numbers from an array. The callback has to return true or false. My callback needs to take a number and return true if it’s even, false if it’s odd.
    2.Write a function that takes one of my array values and make sure it returns what [the docs say] it should. This seems easy enough: function isNotOdd(num) { return num % 2 == 0; } works. For 1, I get false, for 2 I get true, which is what I want (for something more complex, I’d want to try quite a few more different inputs, but this is dead simple).
  2. Use the method on an array, passing in the function I just wrote. So if I use a test array, [1,2,3,4,5,6].filter(isNotOdd) should return [2,4,6], and it does, all good.
  3. If the function definition is very short, say one line, inline it, using arrow function syntax. This is very short, so do that: [1,2,3,4,5,6].filter(n => n % 2 == 0). If it was complex, with many lines, no reason to inline it, it’s generally easier and more readable to keep it seperate.

Edit: I didn’t include reduce (or reduceRight, but that one isn’t really very useful). It too takes a callback, but it works a little bit differently. You can implement any of the array methods (not just the ones above, but also stuff like reverse), plus a lot more, it’s very powerful and you should definitely learn to wield it, but it’s a bit more difficult to grok at first.

1 Like