Javascript итерация по локальному хранилищу Объект JSON (Vanilla Javascript)

Question

Итак, я хочу перебирать объект JSON, хранящийся в моем локальном хранилище браузера. В основном объект JSON выглядит и добавляется так:

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"); 
} 

Затем я хочу итерацию над объектом и проверить на «забить» ключ и сравнить значение потенциальной новой записи.

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

Однако, когда я это делаю, я получаю 135 не определено в журнале. Несмотря на то, что я печатаю объект JSON, и он отображается, как и должно быть

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

Что я здесь делаю неправильно?

EDIT: Предлагаемый дубликат использует jQuery для решения проблемы. Я не хочу использовать jQuery, но ванильный javascript, как описано в названии.

Answer 1

После того, как вы решить эту проблему, что Dimava нашли и pointed out in a comment

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

(подробнее об этом ниже).

... то по своей сути, это не имеет ничего общего с локальным хранилищем или JSON. Вы хотите перебрать массив объектов и получить доступ к свойствам объектов в массиве.

Проблемы с кодом является то, что

1. Вы с помощью for-in, что не для шлейфовых массивов; my answer here имеет полное изложение способов Переберите массивов

2. Вы перезаписать значение key

3. Вы пытаетесь сделать key сделать двойной долг

Вместо использования любой из обычных способов для перебора массивов, таких как forEach:

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

---

Об извлечении объекта из локального хранилища, вы можете сделать это немного проще:

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} 
]; 

После того, как вы обновили его, сохраните его (без особой причины, чтобы сохранить его перед обновлением ее, как ваш исходный код сделал):

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

Возможно, вы также подумаете о том, чтобы имя локального хранилища и имя переменной совпадали.