Question

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

以下是我处理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页面上获取所需信息。

这是输出的样子（以及我需要它）：

Answer 1

您可能需要查看此答案：Can I access variables from another file?

首先，您没有正确接收.json，因为您甚至没有调用loadJSON（）。可以定义和调用函数。你所做的只是定义两个函数，然后通过“onload”参数调用第二个函数。你忘了调用loadJSON（）。如果您不知道如何执行此操作，则必须在loadData内部编写loadJSON（）。

Seconly，即使您调用该函数，它也不会起作用，因为您没有在服务器上工作。因此，正如上面链接中的问题所示，您将收到此错误：

XMLHttpRequest无法加载file：/// [path-to-file]。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

关于你的第一个问题，你应该采取不同的方法。使用循环，您应该创建尽可能多的 p 元素，因为元素具有最终颜色数组。请查看本指南：https://www.w3schools.com/js/js_htmldom_nodes.asp，

Answer 2

我认为将颜色（对象）推送到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>'; 
      }
    }

此处的完整示例https://jsfiddle.net/or9o9upb/

如果要迭代类元素：

var el = document.getElementsByClassName("myP");

      for(let i = 0; i<el.length; i++){
      el[i].innerHTML = colorItems[i];
      }

此处示例https://jsfiddle.net/8Lq2nd23/

如果你有一个带json的js文件：

<script src="/path/to/colors.js"></script>

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

但你的js必须是这样的：

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

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

2 个答案: