Javascript iterate over local storage JSON object (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.

Dupe? http://stackoverflow.com/questions/3138564/looping-through-localstorage-in-html5-and-javascript — httpNick, Sep 29 '16 at 17:12
@Dimava: Oooh, I totally missed that. The `stringify` is there, but the `parse` is missing. — T.J. Crowder, Sep 29 '16 at 17:16
*"Even though I print the JSON object and it shows up as it should be"* The fact that you get that specific output means that `playerHighscoreList` is a **string**. Logging an array/object produces a slightly different output. — Felix Kling, Sep 29 '16 at 17:17
Potentially a duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196). — Felix Kling, Sep 29 '16 at 17:18

score 4 · Accepted Answer · edited May 23 '17 at 12:06

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

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
You're overwriting the value of key
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.

Javascript iterate over local storage JSON object (Vanilla Javascript)

1 Answers1