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

私はここで間違っていますか？

編集： 推奨される複製では、問題を解決するために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はあなたがkeyが

代わりに二重の義務を行うにしようとしているあなたは、使用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)); 

ローカルストレージ名と変数名を一致させることも考えられます。