数据未显示在 Json 文件的表中答案

【问题标题】：Data not showing in table from Json file数据未显示在 Json 文件的表中
【发布时间】：2021-06-23 00:47:41
【问题描述】：

我创建了一个网页，并正在访问一个包含书籍数据的 Json 数据文件。我正在尝试将书籍数据放入表格中。我没有得到要显示的数据，导师也没有太多帮助。请提供一些关于我可能缺少的内容的指示，因为我的开发人员工具没有提供任何错误。这时候，我正在尝试获取标题以了解拉入数据。

JSON sn-p：

{
 "kind": "books#volumes",
 "totalItems": 2341,
 "items": [
  {
   "kind": "books#volume",
   "id": "Wfan6L9RGgYC",
   "etag": "2Q+a2PelwkI",
   "selfLink": "https://www.googleapis.com/books/v1/volumes/Wfan6L9RGgYC",
   "volumeInfo": {
    "title": "The Modern Web",
    "subtitle": "Multi-device Web Development with HTML5, CSS3, and JavaScript",
    "authors": [
     "Peter Gasston"
    ],
    "publisher": "No Starch Press",
    "publishedDate": "2013",
    "description": "Provides information on Web development for multiple devices, covering such topics as structure and semantics, device APIs, multimedia, and Web apps.",
    "industryIdentifiers": [
     {
      "type": "ISBN_13",
      "identifier": "9781593274870"
     },

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Lee Baldwin - Milestone 1a</title>
        <link rel="stylesheet" href="./styles/main.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //retrieve data from json file
                $.getJSON("./json/google-books-search.json",function(bookData) {
                    var books = "";

                    //loop through bookData records
                    $.each(bookData, function(key, value){
                        //construct rows and cells of data
                        books += "<tr>";
                        books += "<td>" + value.title + "</td>";
                        books += "</tr>"
                    });

                    //insert rows into books table
                    $("#tableBooks").append(books);
                });
            });
        </script>
    </head>

<body>
    <table id="tableBooks">
        
    </table>
</body>
</html>

CSS（如果需要）

body {
    margin: 0px;
}

header {
    background-color: black;
    margin-top: 0px;
    color: yellow;
}

article {
    margin: 5px;
}

footer{
    text-align: center;
}

#tablebooks{
    background-color:aliceblue;
    color: black;
}

感谢您的帮助和耐心。我基本上必须在支付大学课程费用的同时自学。

【问题讨论】：

您是在服务器上运行它还是只是在浏览器中从文件中运行它？乍一看，我认为您可能遇到了 CORS 问题。你能列出你的控制台错误吗？
嗨弗拉基米尔，这里有 2 个错误：``` leebaldwin_milestone1a.html:1 Access to XMLHttpRequest at 'file:///C:/Users/lbald/OneDrive/Documents/College%20Docs/ IT%204403/Milestone%201/json/google-books-search.json' from origin 'null' 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、铬不受信任，https。 jquery.min.js:2 GET file:///C:/Users/lbald/OneDrive/Documents/College%20Docs/IT%204403/Milestone%201/json/google-books-search.json net::ERR_FAILED ` ``
在浏览器中运行。
@VladimirMujakovic 我用 CORS 解决了这个问题，但现在我收到以下消息：' leebaldwin_milestone1a.html:21 未捕获的类型错误：无法读取字符串中未定义的属性 'title'。 (leebaldwin_milestone1a.html:21) 在 Function.each (jquery-3.6.0.min.js:2) 在 Object.success (leebaldwin_milestone1a.html:18) 在 c (jquery-3.6.0.min.js:2)在 Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2) 在 l (jquery-3.6.0.min.js:2) 在 XMLHttpRequest. (jquery-3.6.0.min .js:2)

标签： jquery json

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Lee Baldwin - Milestone 1a</title>
        <link rel="stylesheet" href="./styles/main.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //retrieve data from json file
                $.getJSON("./json/google-books-search.json",function(bookData) {
                    var books = "";

                    //loop through bookData records
                    // **** Change value.title to value.items.title ****
                    $.each(bookData, function(key, value){
                        //construct rows and cells of data
                        books += "<tr>";
                        books += "<td>" + value.items.title + "</td>";
                        books += "</tr>"
                    });

                    //insert rows into books table
                    $("#tableBooks").append(books);
                });
            });
        </script>
    </head>

<body>
    <table id="tableBooks">
        
    </table>
</body>
</html>

【讨论】：

嗨汤姆森，我改变了线路，但它仍然不起作用。我目前正在浏览器中运行它，因为我无法从我目前所在的位置访问我的网站。
尝试使用console.log查看books变量的显示结果。请参阅下面的示例以了解如何使用 console.log 在浏览器中进行调试。 geeksforgeeks.org/javascript-console-log-with-examples/….
谢谢汤姆森。我解决了这个问题，让它在页面上显示前 10 本书。学期结束后，我的下一个目标是利用秋季前的 2 周时间来学习如何获得它，以便我对我网站上的所有结果进行分页。我也在学习如何使用 CSS 网格来定位。我一直只是使用表格代码来定位元素，所以这应该很有趣。