我有一个名为 color.js 的 JSON 文件，如下所示:
{
"colors": [
{
"color": "black",
"category": "hue",
"type": "primary",
"code": {
"rgba": [255,255,255,1],
"hex": "#000"
}
},
{
"color": "white",
"category": "value",
"code": {
"rgba": [0,0,0,1],
"hex": "#FFF"
}
},
]
}
这是我处理 html 文件的方式:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script type="primary" src="colors.json"></script>
<script type="text/javascript">
colorItems=['beige', 'red', 'blue'];
function loadJSON() {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'colors.json', true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
colorItems.push(JSON.parse(xobj.responseText)); // line 21
console.log(xobj.responseText); // line 22
}
};
}
function loadData(){
for (i=0; i<4; i++){
console.log(colorItems[i]);
document.getElementById('myP1').innerHTML+=colorItems[i]+'<br>';
}
}
</script>
<title></title>
</head>
<body onload="loadData()">
<p class="myP" id="myP1"></p>
<p class="myP" id="myP2"></p>
<p class="myP" id="myP3"></p>
<p class="myP" id="myP4"></p>
<p class="myP" id="myP5"></p>
</body>
</html>
我需要在页面加载时，将每个对象(在 JSON 文件中)的信息推送到 colorItems 数组。然后，它们数组渲染到正文中的段落(具有类 myP)。但是，我面临两个问题:
- 我只能使用
getElementById获取段落数据，但是 不是getElementsByClassName。 - 我无法将正确的数据推送到
colorItems数组中。因此，我无法在 html 页面上获取所需的信息。
这就是输出的样子(以及我需要的样子):
最佳答案
您可能想看看这个答案:Can I access variables from another file?
首先，您没有正确接收 .json，因为您甚至没有调用 loadJSON()。可以定义和调用函数。您所做的只是定义两个函数，然后通过“onload”参数调用第二个函数。您忘记调用 loadJSON()。如果您不知道如何执行此操作，则必须在 loadData 中编写 loadJSON()。
其次，即使您调用该函数，它也不会起作用，因为您不在服务器上工作。因此，正如上面链接中的问题所述，您将收到此错误:
XMLHttpRequest cannot load file:///[path-to-file]. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
关于你的第一个问题，你应该采取不同的方法。使用循环时，您应该创建与最终颜色数组的元素一样多的 p 元素。看看这个指南:https://www.w3schools.com/js/js_htmldom_nodes.asp ,
关于javascript - 无法将 json 文件数据渲染为 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50512521/