Javascript遍历本地存储JSON对象（Vanilla Javascript）

Question

So I want to iterate over a JSON object stored in my Local storage of the browser. Basically the JSON object looks and is added like this:

if (localStorage.getItem("playerHighscoreObject") == undefined) {
playerHighscoreList = [
  {'name': "Ben", 'score': 40},
  {'name': "Joe", 'score': 44},
  {'name': "Anna", 'score': 51},
  {'name': "Mitch", 'score': 59},
  {'name': "Abdi", 'score': 63}
];
localStorage.setItem("playerHighscoreObject", JSON.stringify(playerHighscoreList));
} 
else {
playerHighscoreList = localStorage.getItem("playerHighscoreObject");
}

I then want to iterate over the object and check for the "score" key and compare the values to a potential new entry.

function saveScore() {
  var key = "score";
  console.log(playerHighscoreList);
  for (key in playerHighscoreList) {
    if (playerHighscoreList.hasOwnProperty(key)) {
      var val = playerHighscoreList[key];
      console.log(val);
    }
  }
}

However when I do this I get 135 undefined in the log. Even though I print the JSON object and it shows up as it should be

[{"name":"Ben","score":40},{"name":"Joe","score":44},{"name":"Anna","score":51},{"name":"Mitch","score":59},{"name":"Abdi","score":63}]

What am I doing wrong here?

EDIT: Suggested duplicate uses jQuery to solve the problem. I do not wish to use jQuery, but vanilla javascript as described in the title.

Answer 1

Once you fix the problem that Dimava found and pointed out in a comment

else {
    playerHighscoreList = JSON.parse(localStorage.getItem("playerHighscoreObject"));
    //                    ^^^^^^^^^^---- this was missing
}

(More on that below.)

...then at its core, this has nothing to do with local storage or JSON. You want to loop through an array of objects and access a property on the objects in the array.

The problem with your code is that

1. You're using for-in , which isn't for looping through arrays; my answer here has a complete rundown of ways to loop through arrays

2. You're overwriting the value of key

3. You're trying to make key do double-duty

Instead, use any of the normal ways to loop through arrays, such as forEach :

function saveScore() {
  var key = "score";
  playerHighscoreList.forEach(function(entry) {
    if (entry.hasOwnProperty(key)) {
      var val = entry[key];
      console.log(val);
    }
  });
}

---

About your retrieval of the object from local storage, you can make that a bit simpler:

playerHighscoreList = JSON.parse(localStorage.getItem("playerHighscoreObject") || "null") || [
  {'name': "Ben", 'score': 40},
  {'name': "Joe", 'score': 44},
  {'name': "Anna", 'score': 51},
  {'name': "Mitch", 'score': 59},
  {'name': "Abdi", 'score': 63}
];

Once you've updated it, save it (no particular reason to save it before updating it, as your original code did):

localStorage.setItem("playerHighscoreObject", JSON.stringify(playerHighscoreList));

You might also consider making the local storage name and the variable name match.