我想将 JSON 数据从 json 文件调用到 html 表答案

【问题标题】：I want to call JSON data from json file to html table我想将 JSON 数据从 json 文件调用到 html 表
【发布时间】：2020-05-11 05:23:07
【问题描述】：

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

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

但是，HTML 页面中没有 JSON 数据。

为了检查这个我放了

带有类演示的标签并仅在此位置调用“Hello”，但没有任何数据。

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

错误：未捕获的 SyntaxError：JSON 中位置 1 的意外标记 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>

【问题讨论】：

标签： javascript json bootstrap-4

【解决方案1】：

这里发生了什么？

实际上，data 变量根本不是 JSON（它可能看起来像 JSON，但实际上不是），您可以使用 typeof 方法轻松找到它。所以看看下面的sn-p。

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 存在类型为 string，但在您的情况下，data 变量是一个 object，所以每当您尝试获取它的类型时，它将返回object。但是当您使用内置方法对其进行字符串化时，它将显示为string。

如何解决？

所以最后，要读取data 值，您只需要像这样在data 中获取mydata 属性：data.mydata，然后通过for 循环遍历它。强>

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

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


data.mydata.forEach((item, index) => console.log(`item ${index} in mydata is:`, item))

【讨论】：

【解决方案2】：

您误解了 JSON 的工作原理。您的 data 已经处于 JSON 兼容状态。

你只需要 JSON.parse() 来扭转有人使用 JSON.stringify() 你的数据结构的效果。

例如：

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

两个控制台日志会给出“大致”相同的输出。

【讨论】：