Javascript 无法将json文件数据呈现为html_Javascript_Json

Javascript 无法将json文件数据呈现为html

javascript json

Javascript 无法将json文件数据呈现为html,javascript,json,Javascript,Json,我有一个名为colors.js的JSON文件，如下所示： { "colors": [ { "color": "black", "category": "hue", "type": "primary", "code": { "rgba": [255,255,255,1], "hex": "#000" } },

我有一个名为colors.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"
          }
        },
    ]
}

var colorsjs = {
    "colors": [//....code

下面是我如何处理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>


颜色项=['米色'，'红色'，'蓝色']；
函数loadJSON（）{
var xobj=新的XMLHttpRequest（）；
重写emimetype（“application/json”）；
open（'GET'，'colors.json'，true）；
xobj.onreadystatechange=函数（）{
如果（xobj.readyState==4&&xobj.status==“200”）{
colorItems.push（JSON.parse（xobj.responseText））；//第21行
console.log（xobj.responseText）；//第22行
}
};
}    
函数loadData（）{
对于（i=0；i我认为将颜色（对象）推送到colorItems（数组）的方法可以是：
colorsjs.colors.map((o,i)=>{
     colorItems.push(o.color);
});

然后，在加载数据中：
function loadData(){
      for (i=0; i<colorItems.length; i++){
          document.getElementById('myP'+(i+1)).innerHTML = colorItems[i]+'<br>'; 
      }
    } 

您可能想看看这个答案：
首先，您没有正确接收.json，因为您甚至没有调用loadJSON（）。可以定义和调用函数。您所做的只是定义两个函数，然后通过“onload”参数调用第二个函数。您忘记了调用loadJSON（）。如果您不知道如何做，您必须编写loadJSON（）就在loadData里面
Seconly，即使您调用该函数，它也不会工作，因为您没有在服务器上工作。因此，正如上面链接中的问题所述，您将得到以下错误：
XMLHttpRequest无法加载文件：///[文件路径]。只有协议方案支持跨源请求：http、数据、chrome、chrome扩展、https、chrome扩展资源
关于你的第一个问题，你应该采取不同的方法。使用循环，你应该创建尽可能多的p元素，就像元素具有最终颜色数组一样。看看这个指南：，你能添加一个你想要的最终结果的示例吗？我刚刚添加了一个屏幕截图。谢谢。但我需要数据可以从JSON文件中读取，但在html文件中不可用（硬编码）。@MaYaNicolson这是相同的想法，但我不能用JSFIDLE或其他我理解的东西进行复制。但我已经有一个问题（在主要问题中提到）是因为我无法以正确的格式从JSON文件中获取数据。如果您看到我的屏幕截图，“未定义”将呈现在段落中。如果您可以在此处将此问题的解决方案作为注释或答案发布，那就太好了。感谢您的解释。1.我可能必须运行（虚拟）我的机器上的服务器。我说的对吗？2.我已经修好了！如果你是新手，我不建议你运行自己的服务器。相反，搜索一些流行的Web服务器来为你做这项工作！我建议你使用DigitalOcean，它提供了广泛的服务。
<script src="/path/to/colors.js"></script>

  <script>
//it's already available 
  console.log(colorsjs);
  </script>

var colorsjs = {
    "colors": [//....code