如何在 JSON 文件中获取不同的 JSON 对象答案

【问题标题】：How to get different JSON objects within JSON file如何在 JSON 文件中获取不同的 JSON 对象
【发布时间】：2020-12-25 09:58:28
【问题描述】：

我正在尝试使用 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。

【问题讨论】：

这很简单，可以在谷歌上查看一些教程。我给了一个这样的 - here
There is no such thing as a JSON object

标签： javascript jquery json ajax

【解决方案1】：

您可以使用Array.prototype.forEach。

data.Footwear.Adidas.forEach(x => console.log(x));

如果您想遍历键，请使用 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]);
}

【讨论】：

我已经尝试过你的建议，它有效。但是我现在正在尝试做 data.Footwear.forEach(x => console.log(x));打印出 Footwear 对象中的所有对象。错误：未捕获类型错误：data.Footwear.forEach 不是函数
@AmirShaw 出现错误是因为data.Footware 不是数组。如果要遍历键，请使用 for..in 循环：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…