Extract data from an array using map()

Extract data from an array using map()
0

#1

Hello, I’m getting a 414 error when I click the Ask for Help button, so I’m going to post a link to my challenge and paste the code I’m using (unsuccessfully) below.

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

CODE: var rating = watchList,map((“title”, “rating”)) => {
return watchList.length == “title” && “rating”;
}

The code above really sucks, but I must explain that I am very confused by the object-array (is that the right word?) for this challenge. I freaked out and I believe that shut part of my brain down because I’m not really thinking clearly about this whole project.

I’m hoping one of you can shoot me a fresh perspective so I can reorient myself and reapproach this challenge. On the surface it seems really easy and I feel like I can solve this, but I can’t right now.

Any suggestions/guidance appreciated.


#2

If you mean watchList, then “object array” works but I might say “array of objects” for clarity.

var rating = watchList,map((“title”, “rating”)) => {
  return watchList.length == “title” && “rating”;
}

There are some problems here. It should be a period before map, you are passing in the variables wrong, and you are returning the wrong thing.

The map needs the period before it because it is a method, a function that is built into every array. It’s been there all along, you just never used it. This method takes (usually) one parameter: a function (often called a callback function). So you have:

var result = myData.map(myFunction);

That function will process each element in that array add it to a new array that will be returned assigned (in this case) to result.

OK, so how does that function work. Well, map is going to send it some things. It actually sends three things but usually we only care about the first one. We need to “catch” that by naming it. Let’s call it “el” for “element”, but we could have called it “frogSkinPajamas” - JS doesn’t care, we tell it what we’re going to call it. So, we have:

var myFunction = (el) => {
  // do stuff
};

So, we catch what’s being sent and call it el. Now we can process each element and do whatever we want to it.

Consider this code:

const people = [
  {
    firstName: 'Dorthy',
    lastName: 'Parker',
    quote: 'That woman speaks eighteen languages, and she can’t say "No" in any of them.'
  },
  {
    firstName: 'Robert',
    lastName: 'Benchley',
    quote: 'I do my best work sitting down; that\'s where I shine.'
  },
  {
    firstName: 'Alexander',
    lastName: 'Woollcott',
    quote: 'All the things I really like to do are either immoral, illegal or fattening.'
  },
];

const newArr = people.map((person) => {
  return {
    name: person.firstName + ' ' + person.lastName,
    quote: person.quote
  };
});

I have an array of stuff. I want to create a new array where the first and last names are in one variable instead of two.

So, I map the array of objects people. Into my function I accept a variable that I’ve chosen to call “person”. This will run three times, once for each object in my array. The first time, it will get an object like this:

  {
    firstName: 'Dorthy',
    lastName: 'Parker',
    quote: 'That woman speaks eighteen languages, and she can’t say "No" in any of them.'
  }

and it will be assigned to the variable person. Then I will immediately return a new object that that has two properties, the new name that I make, and the old quote that I just copy over.

  {
    name: 'Dorthy Parker',
    quote: 'That woman speaks eighteen languages, and she can’t say "No" in any of them.'
  }

Where does this new, nameless object go? It goes into the first slot of a new array that will eventually go into the variable newArr. The map method does this for each of the array elements so I end up with a new array of three elements.

Does this make sense?

You need to do something similar in this challenge. You are going to map across watchList. You will get sent each object. You need to create a function that will accept the objects. You need to name the object. Maybe film would be good. You need to create a new object and return it. It says you need a title and rating. If it were the year and genre you needed, you might return something like { year: film.Year, genre: film.Genre }. Don’t let all the double quotes on the object properties fool you. Since there are no spaces, etc. in the property names, so they didn’t actually need the quotes.

Let us know if this is not enough help.

Yes, this is confusing stuff. Yes, it takes a little while to get the hang of it. It is a different way of thinking, and if you do it over and over, you start to get it. Just keep with it.


#3

I should also note, that I wrote an anonymous function inline. It’s also possible to write the function separately and assign it to a variable:

const myFunction = (person) => {
  return {
    name: person.firstName + ' ' + person.lastName,
    quote: person.quote
  };
};

const newArr = people.map(myFunction);

You will see it done both ways. They do it this way if the function gets to big, if they want to use it different places, or want to pass it around to other functions. For the challenge, I’d just write it inline, like I did in the example in the first message.

One of the “strange” things about JS is how function can be passed around. It’s weird at first, but also very powerful. Don’t get discouraged.

There are some other tricks you can do to simplify the code, but this is the basics and it wills set you on the right path.


#5

I am returning both the requested elements of the object array but I am not passing the test. Here is the code I am using:

const rating = watchList.map(myFilm => ([myFilm.Title, myFilm.imdbRating]));

I am returning Inception,8.8,Interstellar,8.6,The Dark Knight,9.0,Batman Begins,8.3,Avatar,7.9
It doesn’t have the curly braces defining the names of each of the elements. I now wonder if my fault lie in that. But I can’t see right now where I’m messing up in regards to my code.


#7

Solved it! Thanks for all your help @kevinSmith