calling data from nested .json using ajax

Question

I'm new one to work with JSON and getting stuck that how to call JSON data from nested .json file. please check the code below ...

JSON FORMAT

{

    "hotels": {
        "category": [{
            "name": "Exotic and Luxurious",
            "products": [{
                "name": "Sofitel L'Imperial Resort and Spa",
                "budget": "Luxery",
                "location": "flic en flac",
                "price": "71500"
            }, {
                "name": "Shanti Maurice a Nira Resort",
                "budget": "Luxery",
                "location": "Chemin Grenier",
                "price": "88500"
            }]
        },{
            "name": "In the Tourist Hub",
            "products": [{
                "name": "Sofitel L'Imperial Resort and Spa",
                "budget": "Luxery",
                "location": "flic en flac",
                "price": "71500"
            }, {
                "name": "Shanti Maurice a Nira Resort",
                "budget": "Luxery",
                "location": "Chemin Grenier",
                "price": "88500"
            }]
        },{
            "name": "Close to the Beach and Market",
            "products": [{
                "name": "Sofitel L'Imperial Resort and Spa",
                "budget": "Luxery",
                "location": "flic en flac",
                "price": "71500"
            }, {
                "name": "Shanti Maurice a Nira Resort",
                "budget": "Luxery",
                "location": "Chemin Grenier",
                "price": "88500"
            }]
        },{
            "name": "Private and Peaceful",
            "products": [{
                "name": "Sofitel L'Imperial Resort and Spa",
                "budget": "Luxery",
                "location": "flic en flac",
                "price": "71500"
            }, {
                "name": "Shanti Maurice a Nira Resort",
                "budget": "Luxery",
                "location": "Chemin Grenier",
                "price": "88500"
            }]
        }]
    }
}

AJAX CODE

    jQuery(document).ready(function() {
    jQuery.ajax({
        url: 'hotels.json',
        type: 'GET',
        dataType: 'json',
        success : function(data){

        /*jQuery(data).each(function(index, value){
            console.log(value.hotels.name);
        })*/
        //console.log(data.hotels.category[1].name);
        //alert(JSON.stringify(data));
        var i = 0;
        jQuery(data.hotels.category).each(function(){
            jQuery('.theme ul').append('<li data-role="'+data.hotels.category[i].name+'">'+data.hotels.category[i].name+'</li>');
            i++;
        })
        jQuery(data.hotels.category).each(function(){
            jQuery('.budget ul').append('<li data-role="'+data.hotels.category[i].name.products[0].name+'">'+data.hotels.category[i].name.products[0].name+'</li>');
            i++;
        })
    }
    })
    .done(function() {
        console.log("success");
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });

});

HTML

<div class="theme">
<p>Hotel experience theme</p>
    <ul>

    </ul>
</div>

    <div class="budget">
    <p>Budget</p>
        <ul>

        </ul>
    </div>

I want to call name data from products which is defined in category in <li> of budget div

Barmar · Accepted Answer · 2015-12-19 19:40:31Z

1

Change:

jQuery(data.hotels.category).each(function() {...});

to:

jQuery.each(data.hotels.category, function() {...});

The first form is for looping over DOM elements in a selection, the second form is for looping over Javascript arrays and objects.

And within the function, you can use this to refer to the element, you don't need to use data.hotels.category[i].

But if you continue to use data.hotels.category[i], you need to set i back to 0 before the second loop. Or you could just do everything in one loop. And .each() passes the array index to the function, so you don't need your own variable.

Finally, products is not a sub-property of the name property.

The final result of fixing and simplifying this should be:

    jQuery.each(data.hotels.category, function(){
        jQuery('.theme ul').append('<li data-role="'+this.name+'">'+this.name+'</li>');
        jQuery('.budget ul').append('<li data-role="'+this.products[0].name+'">'+this.products[0].name+'</li>');
    });

edited Dec 19, 2015 at 19:40

answered Dec 19, 2015 at 19:34

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

3 Comments

Kamal Over a year ago

hi barmar thank u sp much for ur help but its still giving error colsole saying that " jQuery('.budget ul').append('<li data-role="'+this.name.products[0].name+'">'+this.name.products[0].name+'</li>');" "TypeError: this.name.products is undefined"

Barmar Over a year ago

I fixed that in my last edit. Don't you see where I wrote "Finally, products is not a sub-property of the name property"?

Barmar Over a year ago

It should be this.products[0].name, not this.name.products[0].name.

Zakaria Acharki · Accepted Answer · 2015-12-19 19:33:03Z

1

The products belong to category directly so you don't have to pass by name to get it, you should go directly to it, so try to replace :

data.hotels.category[i].name.products[0].name

BY :

data.hotels.category[i].products[0].name

Hope this helps.

answered Dec 19, 2015 at 19:33

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

calling data from nested .json using ajax

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related