javascript - 使用 ajax 从嵌套的 .json 调用数据

Question

我是使用 JSON 的新手，遇到了如何从嵌套 .json 调用 JSON 数据的问题文件。请检查下面的代码...

JSON 格式

{

    "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 代码

    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>

我想从 <li> 的类别中定义的产品中调用名称数据的 budget格

Answer 1

改变:

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

到:

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

第一种形式用于循环选择中的 DOM 元素，第二种形式用于循环 Javascript 数组和对象。

并且在函数内，您可以使用this 来引用元素，您不需要使用data.hotels.category[i]。

但是如果继续使用data.hotels.category[i]，则需要在第二个之前将i设置回0环形。或者你可以在一个循环中完成所有事情。 .each() 将数组索引传递给函数，因此您不需要自己的变量。

最后，products 不是 name 属性的子属性。

修复和简化这个问题的最终结果应该是:

    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>');
    });