javascript - 如何在 JSON 文件中获取不同的 JSON 对象
问题描述
我正在尝试使用 AJAX 和 jQuery 从 JSON 获取特定数据。我的 JSON 文件如下所示：
"Footwear": {
"Adidas": [
{
"id" : 0,
"product-name": "ADIDAS MAT WIZARD HYPE RING BOOTS",
"product-brand": "ADIDAS",
"product-image": {
"main-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21026945.jpg"
],
"thumb-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/2/1/21026945.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/e/f/ef1476_ftw_photo_side-medial-center_8.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/e/f/ef1476_ftw_photo_front-lateral-top_8.jpg"
],
"thumb-Big-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21026945.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/e/f/ef1476_ftw_photo_side-medial-center_8.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/e/f/ef1476_ftw_photo_front-lateral-top_8.jpg"
]
},
"product-code": "BA8810",
"discount-applied": "",
"current-stock": "IN STOCK",
"product-colour": "Black/Gold",
"product-size": {
"Six": "6",
"Seven": "7",
"Eight": "8",
"Nine": "9",
"Ten": "10",
"Eleven": "11"
},
"product-price": "124.99"
}
],
"Nike": [
{
"id" : 1,
"product-name": "NIKE HYPERKO 2.0 BOXING BOOTS",
"product-brand": "NIKE",
"product-image": {
"main-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/c/i/ci2953-606b.jpg"
],
"thumb-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/2/1/21032253.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/c/i/ci2953-606b.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/a/p/aps-5704.jpg"
],
"thumb-Big-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21032253.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/c/i/ci2953-606b.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/a/p/aps-5704.jpg"
]
},
"product-code": "HA5439",
"discount-applied": "",
"current-stock": "IN STOCK",
"product-colour": "Red",
"product-size": {
"Six": "6",
"Seven": "7",
"Eight": "8",
"Nine": "9",
"Ten": "10",
"Eleven": "11"
},
"product-price": "189.99"
}
],
"Rival": [
{
"id" : 3,
"product-name": "RIVAL RSX-GUERRERO DELUXE BOXING BOOTS",
"product-brand": "RIVAL",
"product-image": {
"main-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21028666.jpg"
],
"thumb-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/2/1/21028666.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/r/s/rsx-guerrero-deluxe-gold-inside.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/r/s/rsx-guerrero-deluxe-gold-combo.jpg"
],
"thumb-Big-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21028666.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/r/s/rsx-guerrero-deluxe-gold-inside.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/r/s/rsx-guerrero-deluxe-gold-combo.jpg"
]
},
"product-code": "HA4852",
"discount-applied": "",
"current-stock": "IN STOCK",
"product-colour": "Gold",
"product-size": {
"Six": "6",
"Seven": "7",
"Eight": "8",
"Nine": "9",
"Ten": "10",
"Eleven": "11"
},
"product-price": "89.99"
}
]
},
"Gloves": {
"Adidas": [
{
"id" : 0,
"product-name": "ADIDAS LIMITED EDITION CUSTOM US HANDMADE LACE SPARRING GLOVE",
"product-brand": "ADIDAS",
"product-image": {
"main-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21034351_4.jpg"
],
"thumb-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/2/1/21034351_4.jpg"
],
"thumb-Big-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21034351_4.jpg"
]
},
"product-code": "HA5691",
"discount-applied": "",
"current-stock": "IN STOCK",
"product-colour": "Gold",
"product-size": "",
"product-price": "249.99"
}
],
"Top Pro": [
{
"id" : 1,
"product-name": "TOP PRO 360 PRO BOXING LEATHER SPARRING GLOVES",
"product-brand": "TOP PRO",
"product-image": {
"main-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21032894.jpg"
],
"thumb-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/2/1/21032894.jpg"
],
"thumb-Big-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21032894.jpg"
]
},
"product-code": "HA5538",
"discount-applied": "",
"current-stock": "IN STOCK",
"product-colour": "Gold/Black",
"product-size": "",
"product-price": "109.99"
}
],
"Ring Side": [
{
"id" : 2,
"product-name": "RINGSIDE PRO EQUIPMENT ULTRA PRO SPAR LACE GLOVE",
"product-brand": "RINGSIDE",
"product-image": {
"main-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21028646_4.jpg"
],
"thumb-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/2/1/21028646_4.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/72x/9df78eab33525d08d6e5fb8d27136e95/1/1/118D6E8B-1EF9-4A34-BADE-624EC55D7F0D_4.jpg",
""
],
"thumb-Big-url": [
"https://www.boxfituk.com/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/2/1/21028646_4.jpg",
"https://www.boxfituk.com/media/catalog/product/cache/1/thumbnail/500x500/9df78eab33525d08d6e5fb8d27136e95/1/1/118D6E8B-1EF9-4A34-BADE-624EC55D7F0D_4.jpg"
]
},
"product-code": "HA4847",
"discount-applied": "",
"current-stock": "IN STOCK",
"product-colour": "Black",
"product-size": "",
"product-price": "129.99"
}
]
}
我正在显示来自 JSON 的数据：
$(document).ready(function () {
$.ajax({
url: 'products.json',
type: "GET",
dataType: "json",
success: function (data) {
console.log("Loaded JSON")
console.log(data)
console.log(data.Footwear.Adidas) //I have tried this, it works but how would I loop through a JSON object using ID's available in jQuery
}
});
})
虽然这可行，但我该怎么做，例如拉鞋类并循环遍历 ID 0-3 中的第一个产品，这是第一次使用 AJAX。
解决方案
您可以使用Array.prototype.forEach.
data.Footwear.Adidas.forEach(x => console.log(x));
有关更多详细信息，请查看 MDN：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
如果要遍历键，请使用 for...in 循环：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
for (key in data.Footwear) {
console.log(key, data.Footwear[key]);
}
推荐阅读
- php - 使用会话 ID 修改 PHP 会话
- javascript - 如何解决 NodeJs 中的嵌套承诺？
- javascript - JS通过数组索引返回对象
- objective-c - 如何在 Objective C 中缓存生成的 UIImageViews？
- node.js - 如何使用 twilio 将音频文件发送到 whatsapp？
- amazon-cloudformation - Cloudformation 嵌套堆栈命名
- r - 如何将交互式热图添加到 PDF？
- django - Django Rest Framework 中是否曾经使用过 Django 表单？
- elasticsearch - ES如何多次随机查询而不重复结果？
- ios - 在 SwiftUI 中修改文本