How to get different JSON objects within JSON file

Question

I am trying to get specific data from JSON using AJAX and jQuery. My JSON file looks like:

"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"
            }
        ]
    }

I am showing the data from JSON with:


$(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
        }
    });
})

While this works, how do I go about, as an example pull Footwear and loop through say the first product from ID 0-3 this is the first time using AJAX.

This is simple thing to ask check some tutorials in google. I am giving one such - here — yogihosting
– yogihosting, Commented Dec 25, 2020 at 10:02

cagri · Accepted Answer · 2020-12-25 10:38:19Z

2

You can use Array.prototype.forEach.

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

For more details, check MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

If you want to iterate over keys, use a for...in loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

for (key in data.Footwear) {
    console.log(key, data.Footwear[key]);
}

edited Dec 25, 2020 at 10:38

cagri

8288 silver badges18 bronze badges

answered Dec 25, 2020 at 10:03

Abhyudaya Sharma

1,32715 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amir Shaw Over a year ago

I have tried your suggestion, it works. However I am now trying to do data.Footwear.forEach(x => console.log(x)); to print out all objects within the Footwear object. Error: Uncaught TypeError: data.Footwear.forEach is not a function

Abhyudaya Sharma Over a year ago

@AmirShaw the error is there because data.Footware is not an array. If you want to iterate over keys, use for..in loop: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

How to get different JSON objects within JSON file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related