javascript - 我想将 JSON 数据从 json 文件调用到 html 表

问题描述

我想将 JSON 数据从 json 文件调用到 html 表。但是，错误一次又一次地出现。为什么？有人能帮我吗？

我想在 HTML 表中打印 JSON 数据。“你好”是问题，它有 4 个选项和 1 个答案。

但是，JSON 数据不会出现在 HTML 页面中。

为了检查这个我把

使用类演示标记并仅在此位置调用“Hello”，但没有任何数据到来。

我也在使用 console.log(data); 检查 JSON 数据是否正在调用。但是，它显示一个错误。

错误：未捕获的 SyntaxError：位置 1 处 JSON 中的意外标记 o

var data = {
  "mydata":[
      {
        "Hello":"abcd",
        "opt":["ab","cd","ef","gh"],
        "ans":"cd"
      },
      {
        "Hello":"efgh",
        "opt":["ab","cd","ef","gh"],
        "answer":"ab"
      },
      {
        "Hello":"ijkl",
        "opt":["ab","cd","ef","gh"],
        "answer":"ef"
      },
      {
        "Hello":"mnop",
        "opt":["ab","cd","ef","gh"],
        "answer":"gh"
      }
    ]
  };

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="data.js"></script>
</head>
<body>

  <div class="container">
    <p class="demo"></p>
    <table class="table">
      <thead>
        <tr>
          <th>Hello</th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>

<script>

  var myobj = JSON.parse(data);
  console.log(myobj);

</script>

</body>
</html>

标签： javascriptjsonbootstrap-4

解决方案

这里发生了什么事？

实际上，该data变量根本不是 JSON（它可能看起来像 JSON，但实际上不是），您可以使用typeofmethod轻松找到它。所以看看下面的代码片段。

var data = {
  "mydata": [{
      "Hello": "abcd",
      "opt": ["ab", "cd", "ef", "gh"],
      "ans": "cd"
    },
    {
      "Hello": "efgh",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "ab"
    },
    {
      "Hello": "ijkl",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "ef"
    },
    {
      "Hello": "mnop",
      "opt": ["ab", "cd", "ef", "gh"],
      "answer": "gh"
    }
  ]
};

console.log('data type is:', typeof data);
console.log('JSON data type is:', typeof JSON.stringify(data));

JSON 与 type 存在string，但在您的情况下，data变量是 anobject所以每当您尝试获取它的类型时，它都会返回object。但是，当您使用内置方法对其进行字符串化时，它将显示为string.

如何解决这个问题？

所以最后，为了读取data值，你只需要像这样获取mydata属性data：data.mydata然后通过for循环遍历它。

所以你的最终代码应该是这样的：