我想将 json 文件中的 JSON 数据调用到 html 表

Question

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

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

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

为了检查这个我把

使用 class 演示标记并仅在此 position 上调用“Hello”，但没有任何数据。

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

错误：未捕获的语法错误：JSON 中的意外令牌 o 在 position 1

 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>

Answer 1

这里发生了什么事？

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

 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))

Answer 2

您误解了 JSON 的工作原理。 您的数据已经在 JSON 兼容 state 中。

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

例如：

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

这两个控制台日志将给出“大致”相同的 output。

我想将 json 文件中的 JSON 数据调用到 html 表

问题描述