Question

我是一个使用JSON的新人，并且遇到了如何从嵌套的.json文件中调用JSON数据的问题。请检查以下代码......

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

    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> div budget中类别中定义的产品的名称数据

Answer 1

products直接属于category所以你不必通过name来获取它，你应该直接去它，所以尝试替换：

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

BY：

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

希望这有帮助。

Answer 2

变化：

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

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

2 个答案: