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

calling data from nested .json using ajax

本文关键字：调用 数据 json 嵌套 ajax 使用      更新时间：2023-09-26

我是一个新来处理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>

我想调用在budgetdiv 的<li>中的类别中定义的产品的名称数据

更改：

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

products直接属于category，所以你不必经过name才能得到它，你应该直接去它，所以试着替换：

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

签署人：

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

希望这能有所帮助。

相关文章：