我正在尝试将外部 JSON 文件数据转换为 HTML 表，但它没有显示任何内容。我在控制台中获取所有数据，但不在 HTML 表中获取。
这是我的 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": "$313.68",
"Savings": {
"Amount": 36.31,
"Currency": "USD",
"DisplayAmount": "$36.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": "$529.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 表，例如销售排名、标题、ASIN 代码等以及 <img src=""> 中的图像链接。标签和产品网址 <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>
我被困在这里好几天了，请帮我完成这段代码。谢谢。
最佳答案
我猜，也许您访问数据的方式是错误的。
首先，使用data.SearchResult.Items来访问data.Items的Items替换。
其次，value.BrowseNodeInfo/BrowseNodes/0/SalesRank不是访问对象的JS语法。您可能需要将其更改为 value.BrowseNodeInfo.BrowseNodes[0].SalesRank，与代码中的其他位置相同。
让您的代码在这里运行:http://jsfiddle.net/thanhdx0/Lhvopz3a/
告诉我它是否有效。
关于javascript - 将外部 json 文件转换为 html 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60088949/