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

Question

我已经成功地编写了一个方法，当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);
});

我在想，有一些明显的东西我完全错过了。我也试过这里演示的方法，结果完全一样。

谁能给我指出正确的方向吗？

谢谢！

Answer 1

嗨，你可以这样做：

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