将外部 json 文件转换为 html table

Question

我正在尝试将外部 JSON 文件数据转换为 HTML table 但它没有显示任何内容。我正在控制台中获取所有数据，但不在 HTML table.

中

这是我的 JSON 文件。 results.json

{
    "SearchResult": {
        "Items": [
            {
                "ASIN": "B07RF1XD36",
                "BrowseNodeInfo": {
                    "BrowseNodes": [
                        {
                            "ContextFreeName": "Traditional Laptop Computers",
                            "DisplayName": "Traditional Laptops",
                            "Id": "13896615011",
                            "IsRoot": false,
                            "SalesRank": 1
                        },
                        {
                            "ContextFreeName": "Computers Features",
                            "DisplayName": "Computers Features",
                            "Id": "13900871",
                            "IsRoot": false
                        }
                    ]
                },
                "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF1XD36?tag=extdemo-20&linkCode=osi&th=1&psc=1",
                "Images": {
                    "Primary": {
                        "Small": {
                            "Height": 49,
                            "URL": "https:\/\/m.media-amazon.com\/images\/I\/41vMYgD92xL._SL75_.jpg",
                            "Width": 75
                        }
                    }
                },
                "ItemInfo": {
                    "ManufactureInfo": {
                        "ItemPartNumber": {
                            "DisplayValue": "A515-43-R19L",
                            "Label": "PartNumber",
                            "Locale": "en_US"
                        },
                        "Model": {
                            "DisplayValue": "A515-43-R19L",
                            "Label": "Model",
                            "Locale": "en_US"
                        },
                        "Warranty": {
                            "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
                            "Label": "Warranty",
                            "Locale": "en_US"
                        }
                    },
                    "Title": {
                        "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 inches Full HD IPS Display, AMD Ryzen 3 3200U, Vega 3 Graphics, 4GB DDR4, 128GB SSD, Backlit Keyboard, Windows 10 in S Mode, A515-43-R19L",
                        "Label": "Title",
                        "Locale": "en_US"
                    }
                },
                "Offers": {
                    "Listings": [
                        {
                            "Id": "nVBohxZFi65ksaPEjy8Hq1UFaPdN51ylhVaWNiVEIZ8zCoF1qGAc%2BuRojRgqhi7LQK2VpR5l3KRF%2B5PlHzcbLjowFIeK9mK5SwmlWfNrQfZRvr8TCay%2BTQ%3D%3D",
                            "Price": {
                                "Amount": 313.68,
                                "Currency": "USD",
                                "DisplayAmount": "3.68",
                                "Savings": {
                                    "Amount": 36.31,
                                    "Currency": "USD",
                                    "DisplayAmount": ".31 (10%)",
                                    "Percentage": 10
                                }
                            },
                            "ViolatesMAP": false
                        }
                    ]
                }
            },
            {
                "ASIN": "B07RF2123Z",
                "BrowseNodeInfo": {
                    "BrowseNodes": [
                        {
                            "ContextFreeName": "Traditional Laptop Computers",
                            "DisplayName": "Traditional Laptops",
                            "Id": "13896615011",
                            "IsRoot": false,
                            "SalesRank": 11
                        },
                        {
                            "ContextFreeName": "Computers Features",
                            "DisplayName": "Computers Features",
                            "Id": "13900871",
                            "IsRoot": false
                        }
                    ]
                },
                "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF2123Z?tag=extdemo-20&linkCode=osi&th=1&psc=1",
                "Images": {
                    "Primary": {
                        "Small": {
                            "Height": 47,
                            "URL": "https:\/\/m.media-amazon.com\/images\/I\/41Ty8q6KoaL._SL75_.jpg",
                            "Width": 75
                        }
                    }
                },
                "ItemInfo": {
                    "ManufactureInfo": {
                        "ItemPartNumber": {
                            "DisplayValue": "A515-54-51DJ",
                            "Label": "PartNumber",
                            "Locale": "en_US"
                        },
                        "Model": {
                            "DisplayValue": "A515-54-51DJ",
                            "Label": "Model",
                            "Locale": "en_US"
                        },
                        "Warranty": {
                            "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
                            "Label": "Warranty",
                            "Locale": "en_US"
                        }
                    },
                    "Title": {
                        "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 Inches FHD IPS Display, 8th Gen Intel Core i5-8265U, 8GB DDR4, 256GB SSD, Fingerprint Reader, Windows 10 Home, A515-54-51DJ",
                        "Label": "Title",
                        "Locale": "en_US"
                    }
                },
                "Offers": {
                    "Listings": [
                        {
                            "Id": "nVBohxZFi65ksaPEjy8Hq0kLXhXYwgY3gCxMbf4rvHdUeVUY2qUveuPD8QSHDnrZUh2QVLQx7Ug1PQH%2FCPgAvjITt7ljnFuTnduiZKV31RckMDUmYejQAQ%3D%3D",
                            "Price": {
                                "Amount": 529.99,
                                "Currency": "USD",
                                "DisplayAmount": "9.99"
                            },
                            "ViolatesMAP": false
                        }
                    ]
                }
            }
]}}

此JSON文件是从亚马逊产品广告api生成的。

这是我的 JavaScript 文件 background.js

$(document).ready(function(){
$.getJSON("results.json", function(data){
    console.log(data);
    var products = '';
    $.each(data.Items, function(key,value){
        products +='<tr>';
        products +='<td>'+value.ASIN+'</td>';
        products +='<td>'+value.BrowseNodeInfo/BrowseNodes/0/SalesRank+'</td>';
        products +='<td><a href="'+value.DetailPageURL+'">'+value.ItemInfo/Title/DisplayValue+'</a></td>';
        products +='<td>'+value.Offers/Listings/0/Price/DisplayAmount+'</td>';
        products +='<td><img src="'+value.Images/Primary/Small/URL+'"></td>';
        products +='</tr>';
        $("#tablebody").append(products);
    });
});
});

我正在尝试仅将某些数据从 JSON 文件加载到 html table，例如销售排名、标题、ASIN 代码等，以及图像 link <img src=""> 标签和产品 url 在 <a href=""></a> 标签中，商品标题在 'a' 标签之间。

这是我的 HTML 代码的样子 popup.html

<body>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="background.js"></script>
    <table id="jsontable">
        <thead>
            <tr>
            <th>ASIN</th>
            <th>Sales Rank</th>
            <th>Title</th>
            <th>Price</th>
            <th>Image</th>
            </tr>
        </thead>
        <tbody id="tablebody"></tbody>
    </table>
</body>

我被困在这里好几天了，请帮我完成这段代码。谢谢。

Answer 1

请尝试 this.You 需要存储响应然后获取主键。一旦你获取了所需数据的主节点，你就可以对其进行操作

var data1 = {
  "SearchResult": {
    "Items": [{
        "ASIN": "B07RF1XD36",
        "BrowseNodeInfo": {
          "BrowseNodes": [{
              "ContextFreeName": "Traditional Laptop Computers",
              "DisplayName": "Traditional Laptops",
              "Id": "13896615011",
              "IsRoot": false,
              "SalesRank": 1
            },
            {
              "ContextFreeName": "Computers Features",
              "DisplayName": "Computers Features",
              "Id": "13900871",
              "IsRoot": false
            }
          ]
        },
        "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF1XD36?tag=extdemo-20&linkCode=osi&th=1&psc=1",
        "Images": {
          "Primary": {
            "Small": {
              "Height": 49,
              "URL": "https:\/\/m.media-amazon.com\/images\/I\/41vMYgD92xL._SL75_.jpg",
              "Width": 75
            }
          }
        },
        "ItemInfo": {
          "ManufactureInfo": {
            "ItemPartNumber": {
              "DisplayValue": "A515-43-R19L",
              "Label": "PartNumber",
              "Locale": "en_US"
            },
            "Model": {
              "DisplayValue": "A515-43-R19L",
              "Label": "Model",
              "Locale": "en_US"
            },
            "Warranty": {
              "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
              "Label": "Warranty",
              "Locale": "en_US"
            }
          },
          "Title": {
            "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 inches Full HD IPS Display, AMD Ryzen 3 3200U, Vega 3 Graphics, 4GB DDR4, 128GB SSD, Backlit Keyboard, Windows 10 in S Mode, A515-43-R19L",
            "Label": "Title",
            "Locale": "en_US"
          }
        },
        "Offers": {
          "Listings": [{
            "Id": "nVBohxZFi65ksaPEjy8Hq1UFaPdN51ylhVaWNiVEIZ8zCoF1qGAc%2BuRojRgqhi7LQK2VpR5l3KRF%2B5PlHzcbLjowFIeK9mK5SwmlWfNrQfZRvr8TCay%2BTQ%3D%3D",
            "Price": {
              "Amount": 313.68,
              "Currency": "USD",
              "DisplayAmount": "3.68",
              "Savings": {
                "Amount": 36.31,
                "Currency": "USD",
                "DisplayAmount": ".31 (10%)",
                "Percentage": 10
              }
            },
            "ViolatesMAP": false
          }]
        }
      },
      {
        "ASIN": "B07RF2123Z",
        "BrowseNodeInfo": {
          "BrowseNodes": [{
              "ContextFreeName": "Traditional Laptop Computers",
              "DisplayName": "Traditional Laptops",
              "Id": "13896615011",
              "IsRoot": false,
              "SalesRank": 11
            },
            {
              "ContextFreeName": "Computers Features",
              "DisplayName": "Computers Features",
              "Id": "13900871",
              "IsRoot": false
            }
          ]
        },
        "DetailPageURL": "https:\/\/www.amazon.com\/dp\/B07RF2123Z?tag=extdemo-20&linkCode=osi&th=1&psc=1",
        "Images": {
          "Primary": {
            "Small": {
              "Height": 47,
              "URL": "https:\/\/m.media-amazon.com\/images\/I\/41Ty8q6KoaL._SL75_.jpg",
              "Width": 75
            }
          }
        },
        "ItemInfo": {
          "ManufactureInfo": {
            "ItemPartNumber": {
              "DisplayValue": "A515-54-51DJ",
              "Label": "PartNumber",
              "Locale": "en_US"
            },
            "Model": {
              "DisplayValue": "A515-54-51DJ",
              "Label": "Model",
              "Locale": "en_US"
            },
            "Warranty": {
              "DisplayValue": "One-year International Travelers Limited Warranty (ITW)",
              "Label": "Warranty",
              "Locale": "en_US"
            }
          },
          "Title": {
            "DisplayValue": "Acer Aspire 5 Slim Laptop, 15.6 Inches FHD IPS Display, 8th Gen Intel Core i5-8265U, 8GB DDR4, 256GB SSD, Fingerprint Reader, Windows 10 Home, A515-54-51DJ",
            "Label": "Title",
            "Locale": "en_US"
          }
        },
        "Offers": {
          "Listings": [{
            "Id": "nVBohxZFi65ksaPEjy8Hq0kLXhXYwgY3gCxMbf4rvHdUeVUY2qUveuPD8QSHDnrZUh2QVLQx7Ug1PQH%2FCPgAvjITt7ljnFuTnduiZKV31RckMDUmYejQAQ%3D%3D",
            "Price": {
              "Amount": 529.99,
              "Currency": "USD",
              "DisplayAmount": "9.99"
            },
            "ViolatesMAP": false
          }]
        }
      }
    ]
  }
}
var data = data1.SearchResult.Items;
var products;
$.each(data, function(key, value) {
  products += '<tr>';
  products += '<td>' + value.ASIN + '</td>';
  products += '<td>' + value.BrowseNodeInfo.BrowseNodes[0].SalesRank + '</td>';
  products += '<td><a href="' + value.DetailPageURL + '">' + value.ItemInfo.Title.DisplayValue + '</a></td>';
  products += '<td>' + value.Offers.Listings[0].Price.DisplayAmount + '</td>';
  products += '<td><img src="' + value.Images.Primary.Small.URL + '"></td>';
  products += '</tr>';
  $("#tablebody").append(products);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <script src="jquery-3.4.1.min.js"></script>
  <script src="background.js"></script>
  <table id="jsontable" border=1>
    <thead>
      <tr>
        <th>ASIN</th>
        <th>Sales Rank</th>
        <th>Title</th>
        <th>Price</th>
        <th>Image</th>
      </tr>
    </thead>
    <tbody id="tablebody"></tbody>
  </table>
</body>

Answer 2

我猜你访问数据的方式可能是错误的。

首先，使用data.SearchResult.Items访问项目替换，data.Items。

其次，value.BrowseNodeInfo/BrowseNodes/0/SalesRank不是JS语法访问对象。您可能希望将其更改为 value.BrowseNodeInfo.BrowseNodes[0].SalesRank，与代码中的其他位置相同。

让你的代码在这里工作：http://jsfiddle.net/thanhdx0/Lhvopz3a/

告诉我它是否有效。

将外部 json 文件转换为 html table

Converting external json file to html table

html

javascript

json

amazon-product-api