时间戳

首页 > 解决方案 > 将javascript中的对象打印到html dom中

javascript - 将javascript中的对象打印到html dom中

问题描述

我正在尝试以各种不同的方式将对象打印到 HTML DOM 中，以便我可以理解它如何更好地工作。

但结果看起来像这样：

从本地存储中存储和检索数据。约翰 undefinedJohn 31 New York

如您所见，它返回“undefinedJohn”，我不知道为什么。有人可以向我解释吗？对于在 HTML 中显示对象、数组和 JSON 的其他方法的建议也将不胜感激。

提前致谢！

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>

<p id="demo"></p>

<script>
var myObj, myJSON, text, obj, temp;

var idx = 0;

// Storing data:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML += Object.values(obj)+`<br>`;
document.getElementById("demo").innerHTML += JSON.stringify(obj)+`<br><br>`;
console.log(obj);
for (idx in obj) {
    console.log(obj[idx]);
    console.log(idx);
    temp += obj[idx] + " " + "<br>";
};

document.getElementById("demo").innerHTML += temp;
</script>

</body>
</html>

标签： javascript

解决方案

发生这种情况是因为您声明了temp变量但没有对其进行初始化，因此它将 undefined 作为一个值，只需遵循以下工作代码temp =''：

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>

<p id="demo"></p>

<script>
var myObj, myJSON, text, obj, temp ='';

var idx = 0;

// Storing data:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML += Object.values(obj)+`<br>`;
document.getElementById("demo").innerHTML += JSON.stringify(obj)+`<br><br>`;
console.log(obj);
for (idx in obj) {
    console.log(obj[idx]);
    console.log(idx);
    temp += obj[idx] + " " + "<br>";
};

document.getElementById("demo").innerHTML += temp;
</script>

</body>
</html>

推荐阅读