将数据从JSON文件加载到html / console

时间:2018-05-24 12:03:17

标签: json xmlhttprequest

在这个html文件的body标签内,我有一个单击它的按钮应该导致colors.json的内容进入控制台。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script type="primary" src="colors.json"></script>

    <script type="text/javascript">    
     function load() {
      var someData_notJSON = JSON.parse(data);
      console.log(someData_notJSON[0].red);
      }

      function loadJSON(callback) {

        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', 'colors.json', true); 
        xobj.onreadystatechange = function () {
            if (xobj.readyState == 4 && xobj.status == "200") {                  
              callback(xobj.responseText);
            }
    };
    xobj.send(null); //line 24
  }

  function init() {
    loadJSON(function(response) {
      var actual_JSON = JSON.parse(response);
      console.log(actual_JSON);

    });
  }    

    </script>
    <title></title>
  </head>
  <body>
    <button type="button" name="button" onclick=" init()">Click me</button>
  </body>
</html>

这是colors.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"
          }
        },
    ]
}

在页面加载时出现此错误:未捕获的SyntaxError:意外的令牌: 你知道导致这个问题的原因吗?

2 个答案:

答案 0 :(得分:1)

可能是你的数组末尾有一个不必要的逗号:

for _ in range(self.table_size):
    if self.array[position] is None:
        return False
    elif self.array[position][0]==key:
        return True
    position=(position+1)%self.table_size

答案 1 :(得分:1)

{
    "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"
          }
        }
    ]
}

你可以删除最后一个逗号并试一试。