Amir Shaw
Reputation: 135
How to get different JSON objects within JSON file
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.
Upvotes: 0
Views: 124
Answers (1)
Abhyudaya Sharma
Reputation: 1292
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]);
}
Upvotes: 2
Related Questions
- Get data from json with javascript more than one data
- Retrieving data from json File
- retrieve single object from json file
- Pull different data strings from JSON via Ajax
- Jquery ajax parse json file with different named arrays
- fetch data from jSON file
- getting data from json file
- How to retrieving data from multiple Json files using jquery
- more objects in one json file
- How can I retrieve multiple JSON files using JavaScript?