开发者问题收集

使用 AJAX 检索嵌套 JSON 数组并输出到 HTML 列表

2019-02-15
2340
javascript arrays json ajax

我们的想法是获取一个 JSON 数组，循环遍历 planets 的每个条目并将它们输出到无序列表中，每个 li 一个条目。在这种情况下，一切都运行良好。

当 JavaScript 文件包含 JSON 数组及其下面的代码时，我已成功编写了一种输出嵌套 JSON 的方法，但我在识别使用 AJAX 从外部 .json 文件检索相同数据的方法时遇到了严重麻烦。

这是有效的本地版本。 

<ul id="object-list"></ul>

$(document).ready( function() {
    var sol_sys = [];
    sol_sys = {
        "stars": [
            { "name": "Sun", "object": "Star", "url": "stars/sun" }
        ],
        "planets": [
            { "name": "Mercury", "object": "Planet", "parent": "Sun", "url": "planets/mercury" },
            { "name": "Venus", "object": "Planet", "parent": "Sun", "url": "planets/venus" },
            { "name": "Earth", "object": "Planet", "parent": "Sun", "url": "planets/earth" },
            { "name": "Mars", "object": "Planet", "parent": "Sun", "url": "planets/mars" },
            { "name": "Ceres", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/ceres" },
            { "name": "Jupiter", "object": "Planet", "parent": "Sun", "url": "planets/jupiter" },
            { "name": "Saturn", "object": "Planet", "parent": "Sun", "url": "planets/saturn" },
            { "name": "Uranus", "object": "Planet", "parent": "Sun", "url": "planets/uranus" },
            { "name": "Neptune", "object": "Planet", "parent": "Sun", "url": "planets/neptune" },
            { "name": "Pluto", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/pluto" },
            { "name": "Eris", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/eris" }
        ],
        "moons": [
            { "name": "Luna", "object": "Moon", "parent": "Earth", "url": "moons/luna" },
            { "name": "Callisto", "object": "Moon", "parent": "Jupiter", "url": "moons/callisto" },
            { "name": "Ganymede", "object": "Moon", "parent": "Jupiter", "url": "moons/ganymede" },
            { "name": "Io", "object": "Moon", "parent": "Jupiter", "url": "moons/io" },
            { "name": "Europa", "object": "Moon", "parent": "Jupiter", "url": "moons/europa" },
            { "name": "Enceladus", "object": "Moon", "parent": "Saturn", "url": "moons/enceladus" },
            { "name": "Titan", "object": "Moon", "parent": "Saturn", "url": "moons/titan" },
            { "name": "Miranda", "object": "Moon", "parent": "Uranus", "url": "moons/miranda" },
            { "name": "Triton", "object": "Moon", "parent": "Neptune", "url": "moons/triton" },
            { "name": "Charon", "object": "Moon", "parent": "Pluto", "url": "moons/charon" }
        ]
    }

    var x = [];
    $.each(sol_sys.planets, function(index) {
        x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
    });
    $('#object-list').append(x);
});

但是，我花了两天时间试图找出实现此目的的方法，将 JSON 保存在单独的 .json 文件中。

这是我尝试过的一种方法的示例： 

$(document).ready( function() {
    var sol_sys = $.getJSON('assets/data.json');
    var x = [];

    $.each(sol_sys.planets, function(index) {
        x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
    });
    $('#object-list').append(x);
});

此代码成功获取了控制台中可以看到的数据 ，但它也吐出了此错误消息： Uncaught TypeError：无法读取属性“length” undefined

我在想，有些显而易见的东西我完全忽略了。我也尝试了 此处 演示的方法，结果完全相同。

有人能给我指明正确的方向吗？

谢谢！

2个回答

$.getJSON 是一个异步调用 - 因此您需要使用回调函数来访问返回的数据： 

$.getJSON('assets/data.json', function(sol_sys) {
    var x = [];

    $.each(sol_sys.planets, function(index) {
        x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
    });
    $('#object-list').append(x);
});
tymeJV
2019-02-15

您好，您可以这样做：

您的 ajax： 

function getList() {
   return $.ajax({
        type: "GET",
        url: "YourUrl"
    })

}

像这样调用它： 

    getList().done(function(response){
    var data=JSON.parse(response);
    if (data != null) {
    jQuery.each(data, function(index, value){
//use an id in your ul in order to append some items
    $("#yourUl id").append('<li><a href=' + value.url+ '>' + value.name+ '</a></li>');
                                                    });
        }

})

或者 

$.getJSON( 'assets/data.json').done(function(response) {
    var data=JSON.parse(response);
    if (data != null) {
    jQuery.each(data, function(index, value){
    //use an id in your ul in order to append some items
    $("#yourUl id").append('<li><a href=' + value.url+ '>' + value.name+ '</a></li>');
});
}
})

编辑： 像这样附加元素： 

        $.getJSON( 'data.json').done(function(response) {
    jQuery.each(response, function(index, value){
    $("#planetList").append('<li>'+index+'</li>');
     jQuery.each(value, function(index2, value2){
    $("#planetList").append('<ul><li><a href=' +value2.url+ '>' +value2.name+ '</a></li>')
    console.log(value2);
     })
         $("#planetList").append('<ul>');
    })
})

希望有帮助

stan chacon
2019-02-15