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.

@Dimava: Oooh, I totally missed that. The stringify is there, but the parse is missing. — T.J. Crowder
– T.J. Crowder, Commented Sep 29, 2016 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
– Felix Kling, Commented Sep 29, 2016 at 17:17
Potentially a duplicate of Access / process (nested) objects, arrays or JSON. — Felix Kling
– Felix Kling, Commented Sep 29, 2016 at 17:18

Community · Accepted Answer · 2017-05-23 12:06:55Z

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.

Collectives™ on Stack Overflow

Javascript iterate over local storage JSON object (Vanilla Javascript)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related