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

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

#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


#3

You are not understanding that the callback function argument represents something other than an index. The first argument used in the map callback function represents the actual element being iterated over. If you added a second argument, that one would represent the index. So, your i variable is the actual element in watchList, so you could simply write i.Title instead of watchList[i].Title

P.S. Make sure your map callback function is actually returning something otherwise it will just return undefined for each iteration.


#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}]

#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};
});


#8

Actually, when you return the result of a push, it is returning the length of the array after the push is performed. So, the 1, 2, 3, 4, 5 are not indices, but instead lengths.


#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?


#11

To which code are you referring? No arrow functions are being used in any of the solutions in this particular thread.


#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


#13

@lozm The return is not needed in an arrow function when there is no { } used. For example, I can write the following arrow function two ways.

#1)

const arrowFunctionOne = myName => 'Hello ' + 'Randell'; // returns 'Hello Randell'

#2)

const arrowFunctionTwo = myName => {
  return 'Hello ' + 'Randell'; // returns 'Hello Randell'
};

#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?


#15

If you have more than one line in the { }.

const arrowFunctionThree = myName => {
  const today = Date();
  return 'Hello ' + 'Randell, the current date/time is ' + today;
 // The above returns 'Hello Randell, the current date/time is Thu Jul 12 2018 15:21:36 GMT-0700 (Pacific Daylight Time)'
};

#16

Thank you so much! Really appreciate your help.