Use-the-map-method-to-extract-data-from-an-array

JavaScript
1

Tell us what’s happening:

while running it … I am getting the Title property is ‘undefined’.

Your 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": "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

var rating = [];
rating = watchList.map(function(i){
  rating.push({title: watchList[i].Title,  rating: watchList[i].imdbRating});
});

// Add your code above this line

console.log(rating);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36.

Link to the challenge:

2

i tried with both "[] and . " notation. receiving same error

4

First, reset your code — it seems like you’ve inadvertently changed the watchList array.

Secondly, it seems like you’re misunderstanding what map does. map returns a new version of an array in which each element is transformed in some way. The transformation on each element is the one specified in the function that you pass as an argument to map.

var a = [1, 2, 3];
var b = a.map(function(el) {
  return el * 2;
});

//a is still [1, 2, 3], and b is [2, 4, 6].

You can do the same using properties of an object:

var a = [{foo: 1}, {foo: 2}, {foo: 3, bar: 4}];
var b = a.map(function(el) {
  return {baz: el.foo};
});

//a is still the same
//b is [{baz:1},{baz:2},{baz:3}]
3 Likes
5

yes, that for that “i variable is actual element in watchList” … that helps to understand…

var rating = [];
rating = watchList.map(function(i){
return rating.push({title: i.Title, rating: i.imdbRating});
});

but,here the function is returning index… // output = [1,2,3,4,5]

6

Thanks bro… So we don’t need any other function like 'push ’ to form another array

7

It worked… thank you guys

var rating = [{‘Title’ : ‘x’ , ‘imdbRating’ : 3 , ‘name’ : ‘r’ }, {‘Title’ : ‘i’ , ‘imdbRating’ : 2 , ‘name’ : ‘y’}];
let rating1 = [];
rating1 = rating.map(function(i){
return {title: i.Title, rating: i.imdbRating};
});

9

Thanks for this. It was a perfect example for me to write:

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

10

I don’t understand why we need to include ‘return’ in this instance. If ‘return’ is obsolete in arrow functions at other times - why is it not the case here?

12

Oops my bad. I had a couple of tabs open and was on another one where return was used inside an arrow function. Nevermind! Thanks anyway

14

Oh thank you for explaining anyway! :slight_smile:
What would make one need curly braces in arrow functions then if they work without them?

16

Thank you so much! Really appreciate your help.

18

This is how I solved

var rating = [];
rating = watchList.map(function(item){
  return {"title": item.Title, "rating": item.imdbRating };
});
1 Like