时间戳

首页 > 解决方案 > 数据未显示在 Json 文件的表中

jquery - 数据未显示在 Json 文件的表中

问题描述

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

JSON 片段：

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

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

标签： jqueryjson

解决方案

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

推荐阅读