Functional Programming: Use the map Method to Extract Data from an Array [SOLVED]

Functional Programming: Use the map Method to Extract Data from an Array [SOLVED]
0

#1

How do I put a {} inside the .map function.
I am stuck with :
rating should equal [{"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"}].

Here is my my code so far:

// 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

let rating = watchList.map(x => [x.Title,  x.imdbRating]);

// Add your code above this line

console.log(rating); 

I tried adding curly braces between the the brackets but it is still not working. Like this:

let rating = watchList.map(x => [{x.Title,  x.imdbRating}]);

and this:

let rating = watchList.map(x =>{ [x.Title,  x.imdbRating]});

and just like this:

let rating = watchList.map(x => [{x.Title}, { x.imdbRating}]);

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


#2

This is a syntactic issue with curly braces and arrow functions. If you use arrow braces right after the arrow of an arrow function, you are actually starting a new code block instead of returning an object literal, therefore, this doesn’t work (and your code editor’s linter should be complaining):

const arr = [1, 2, 3];
const brr = arr.map((x) => { num: x });

brr; // [undefined, undefined, undefined]

Because it’s not actually returning an object literal—it’s just a block of code, and you are therefore just trying to run this thing inside the block of code (if I’m not mistaken this is actually valid syntax for… I think labels, someone please correct me if it’s something else, that’s also why you get an array of undefineds instead of an error):

num: x;

Since it’s just block of code inside a function, you can simply use the return keyword if you need to return an object literal:

const arr = [1, 2, 3];
const brr = arr.map((x) => {
  return { num: x };
});

brr; // [{ num: 1 },{ num: 2 },{ num: 3 }]

If you are not familiar with arrow functions quite yet, this may help:

const arr = [1, 2, 3];
const brr = arr.map(function (x) {
  return { num: x };
});

brr; // [{ num: 1 },{ num: 2 },{ num: 3 }]

I hope that helps!


#3

@honmanyau Thank you for the explanation.

Here is the code that solved it.

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

Couldn’t have done it without your explanation.


#4

This challenge is awful. There is no way that a beginner coder (like everyone who is actually doing these challenges) would ever be able to solve this. Also, I found the solution on a github post and the solution there doesn’t even work.


#5

The solution should be this:

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

…but there is a problem. It doesn’t work. The console is logging errors claiming the the 2 colons are unexpected.

Why is this?

With some googling, I found the answer. The problem wasn’t the colons, it was the curly brackets. When the js parser sees a curly bracket following an arrow " => { " it assumes the curly bracket marks the beginning of a function.

This is explained in more detail here:

As explained in the above stackoverflow link, the solution is to correct the js parser’s interpretation of the code. We do this using parentheses.

And here is what that looks like:

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

#6

I feel like going through the step by step curriculum of JS, we should be able to gather the pieces together to be able to solve this. I needed the thorough explanation of the replies to be able to see what I should have done. Instead of using ES6, you can also use:

var rating = watchList.map(function(a) {
return {title: a.Title, rating: a.imdbRating};
})

ES6 function style still confuses me, but I think its good practice


#7

@ymoon715 The explanation of map function in the lesson was thin at best. Even if that was not the case you are likely going to have to do research and study beyond the FCC lessons to grasp functional programming. That’s not FCC, that is just how self-education works.

My go-to is online documentation on MDN especially for the array methods.


I played with examples in repl.it until I had a comfortable familiarity with those. Then I went back and refactored some of my previous FCC solutions using functional programming methods (and later ES6 magic too).

BTW - Congratulations on researching you own solution on the forum instead of just copying the same faulty ES6 answer off the web like everyone else :wink:


#8

Could someone tell me where have I got it wrong Please. Here is my code:

let rating = watchList.map (val=>({'"title"': `${val["Title"]}`, '"rating"': `${val["imdbRating"]}`}));

Here is the test result:
// running test rating should equal [{"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"}]. // tests completed
And here is my result from chrome:

(5) [{…}, {…}, {…}, {…}, {…}]

0: {“title”: “Inception”, “rating”: “8.8”}

1: {"title": "Interstellar", "rating": "8.6"}

2: {“title”: “The Dark Knight”, “rating”: “9.0”}

3: {"title": "Batman Begins", "rating": "8.3"}

4: {“title”: “Avatar”, “rating”: “7.9”}

length: 5

proto: Array(0)


#9

I have passed it by the following code which I could not pass at all before:

let rating = watchList.map (val=>({"title": `${val["Title"]}`, "rating": `${val["imdbRating"]}`}));

Here is chrome result and in fact the result is different from what requested in the test:

(5) [{…}, {…}, {…}, {…}, {…}]

0: {title: “Inception”, rating: “8.8”}

1: {title: "Interstellar", rating: "8.6"}
2: {title: "The Dark Knight", rating: "9.0"}
3: {title: "Batman Begins", rating: "8.3"}
4: {title: "Avatar", rating: "7.9"}
length: 5
__proto__: Array(0);
If this  is the case then the following  code  should  pass the test as well:

let rating = watchList.map (val=>JSON.parse({"title":"${val["Title"]}","rating" :"${val["imdbRating"]}"}));


#10

This is what helped me with headline: Using map to reformat objects in an array. It was a little tricky for me since i never before used map on object.

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

#11

And ditch quotation marks around both properties. You don’t need them.


#12

@codename11 Spoiler tags must go on the outside of the lines with 3 backticks.


#13

I’ve tried this solution. It works in a console debugger, but FCC won’t accept it. Not sure why…

var rating = [];
watchList.map(x => rating.push({title: x[“Title”]}, {rating: x[“imdbRating”]}));


#14

let rating = watchList.map((i) => {
return {
“title”: i.Title,
“rating”: i.imdbRating
};
});

your code is correct, just add “return”


#15

Hi, sir, I got a little confused. I dont understand the meaning of “Spoiler tags must go on the outside of the lines with 3 backticks”.

var rating = watchList.map(x=> ({title:x.Title, rating:x.imdbRating}));```
and
```var rating = watchList.map((x)=> {return {title:x.Title, rating:x.imdbRating}});```

What is the different between them?


#16