简体   繁体   中英

Javascript objects showing up as 'undefined' when iterating through

Really basic, I know, but I am just getting into Javascript and practising with a few arrays and objects. I've written a basic movie database with objects stored in var movies, but the console keeps showing the string ive build where its supposed to insert movie.title as undefined.What am I missing?

 var movies = [ { "title": "Armagedon", "rating": 4.8, "hasWatched": true, }, { "title": "Tomb Raider", "rating": 2.6, "hasWatched": true, }, { "title": "Fight Club", "rating": 4.9, "hasWatched": true, } ]; movies.forEach(function(movie) { var item = "You have "; if (movies.hasWatched = true) { item += "watched "; } else { item += "not seen "; } item += "\\"" + movies.title + "\\" - "; item += movies.rating + " stars"; console.log(item); })

Its obviously something real basic, so go easy on me! Thanks!

movie not movies

 var movies = [ { "title": "Armagedon", "rating": 4.8, "hasWatched": true, }, { "title": "Tomb Raider", "rating": 2.6, "hasWatched": true, }, { "title": "Fight Club", "rating": 4.9, "hasWatched": true, } ]; movies.forEach((movie) => { var item = "You have "; if (movie.hasWatched = true) { item += "watched "; } else { item += "not seen "; } item += "\\"" + movie.title + "\\" - "; item += movie.rating + " stars"; console.log(item); })

With modern Javascript this can be greatly improved:

 var movies = [ { "title": "Armagedon", "rating": 4.8, "hasWatched": true, }, { "title": "Tomb Raider", "rating": 2.6, "hasWatched": true, }, { "title": "Fight Club", "rating": 4.9, "hasWatched": true, } ]; movies.map(({ hasWatched, title, rating }) => `You have ${(hasWatched) ? 'watched ' : 'not seen '}${title} - ${rating} stars`) .forEach(m => console.log(m));

You did it all great except a small typo...
Just change movies to movie

movies.forEach(function(movie) {
  var item = "You have ";
  if (movie.hasWatched = true) {
    item += "watched ";
  } else {
    item += "not seen ";
  }
  item += "\"" + movie.title + "\" - ";
  item += movie.rating + " stars";
  console.log(item);
})

And you can try my little simplification of the same code

movies.forEach(movie => {
  console.log(
    `You have ${movie.hasWatched ? 'watched' : 'not seen'} "${movie.title}" - ${movie.rating}`
  )
})

This code uses arrow function and string interpolation

Ok, a couple of things here. And some recommendations at bottom.

you have two errors: 1) if (movies.hasWatched = true) { , should be if (movie.hasWatched == true) { otherwise you are assigning a value to the object attribute and not calling the comparison operator.

2)because you are inside the iteration block, and each of the instances is referenced with the argument you pass to the function in map, check in this line:

movies.forEach(function(movie) {

You should change movies to movie, all inside this block instead of calling movies.hasWatched, movies.title, movies.rating

Your code should look like this to work:

  var movies = [
  {
    "title": "Armagedon",
    "rating": 4.8,
    "hasWatched": true,
  },
  {
    "title": "Tomb Raider",
    "rating": 2.6,
    "hasWatched": true,
  },
  {
    "title": "Fight Club",
    "rating": 4.9,
    "hasWatched": true,
  }
];

movies.forEach(function(movie) {
  var item = "You have ";
  if (movie.hasWatched == true) {
    item += "watched ";
  } else {
    item += "not seen ";
  }
  item += "\"" + movie.title + "\" - ";
  item += movie.rating + " stars";
  console.log(item);
})
VM695:28 You have watched "Armagedon" - 4.8 stars
VM695:28 You have watched "Tomb Raider" - 2.6 stars
VM695:28 You have watched "Fight Club" - 4.9 stars

Recommendations: Debugging is a patience process well worth to learn. Use the browser dev tools to inspect whats happening. you can run the code directly in the console and also use the debugger to iterate on your code. They are powerful tools. With practice you will pick errors better just reading.

Another little comment is about stackoverflow. Try to debug and hack the errors first, with patience, it will work faster for you at the long term. You will post a lot here on very tricky and unrare things.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM