Javascript 迭代本地存储 JSON 对象（Vanilla Javascript）答案

【问题标题】：Javascript iterate over local storage JSON object (Vanilla Javascript)Javascript 迭代本地存储 JSON 对象（Vanilla Javascript）
【发布时间】：2023-03-24 21:36:02
【问题描述】：

所以我想遍历存储在浏览器本地存储中的 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");
}

然后我想遍历对象并检查“score”键并将值与潜在的新条目进行比较。

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

但是，当我这样做时，我在日志中得到 135 undefined。即使我打印了 JSON 对象并且它显示为应有的样子

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

我在这里做错了什么？

编辑：建议重复使用 jQuery 来解决问题。我不希望使用 jQuery，而是使用标题中描述的 vanilla javascript。

【问题讨论】：

欺骗？ stackoverflow.com/questions/3138564/…
有JSON.parse吗？
@Dimava：哦，我完全错过了。 stringify 在那里，但 parse 不见了。
“即使我打印了 JSON 对象并且它显示为应有的样子” 您获得该特定输出的事实意味着 playerHighscoreList 是一个 字符串。记录一个数组/对象会产生稍微不同的输出。
可能是 Access / process (nested) objects, arrays or JSON 的副本。

标签： javascript json iteration

【解决方案1】：

一旦你解决了Dimava发现和pointed out in a comment的问题

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

（更多内容见下文。）

...那么从本质上讲，这与本地存储或 JSON 无关。你想遍历一个对象数组并访问数组中对象的属性。

你的代码的问题在于

您正在使用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));

您也可以考虑使本地存储名称和变量名称匹配。

【讨论】：