Danny Danny - 2 months ago 18
Javascript Question

Javascript iterate over local storage JSON object (Vanilla Javascript)

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

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.