javascript - 为什么我的数据表没有在函数内部使用 $.each 出现？

Question

我有嵌套数组 json 对象(第 1 层、第 2 层和第 3 层)。我的问题是数据表没有出现。任何相关的 CDN 均已导入。该表仅显示<thead>部分。我引用了很多网站，但都没有解决我的问题。

之前我使用标准表来显示第 3 层 json 中的值，使用 <tbody> , <tr>和<td> ，这样做结果成功了。但现在我删除了所有这些并尝试使用 dataTable，因为我需要它的功能。

我成功显示了第 1 层和第 2 层的值 id。但是对于下面的情况，在数据表中显示第 3 层信息(l3_id、l3_name 等)失败。

JSON

{
    "status": "Success",
    "data": [{
        "project_id": "1",
        "project_name": "project name",
        "l1_task": [{
            "l1_id": "1",
            "l1_name": "Layer 1",
            "l2_task": [{
                "l2_id": "1",
                "l2_name": "Layer 2",
                "l3_task": [{
                        "l3_id": "1",
                        "l3_name": "Layer 3.1"
                    },
                    {
                        "l3_id": "2",
                        "l3_name": "Layer 3.2"
                    }
                ]
            }]
        }]
    }]
}

JS

$(document).ready(function() {

    loadtable();

    $('#Layer3Table').DataTable({
        ajax: {
            url: "exampleData/activity.json"
        },
        columns: [{
                data: "l1_task.0.l2_task.0.l3_task.0.l3_id"
            },
            {
                data: "l1_task.0.l2_task.0.l3_task.0.l3_name"
            }
        ],
    });

    function loadtable() {
        var project = '';
        $.ajax({
            url: url_project_detail,
            crossDomain: true,
            type: 'POST',
            dataType: 'json',
            data: "data",
            success: function(response) {
                if (response.status == "Success") {
                    // Layer 1 array object
                    $.each(response.data[0].l1_task, function(key, value) {
                        project +=
                            "<div>" +
                            "<div>";
                        // Layer 2 array object
                        $.each(value.l2_task, function(key, value) {
                            project +=
                                "<div>" +
                                "<div>" +
                                // Layer 3 array object
                                "<div class='table-responsive'>" +
                                "<table id='Layer3Table' class='table table-striped' style='width:100%'>" +
                                "<thead>" +
                                "<tr>" +
                                "<th class='text-center'>ID</th>" +
                                "<th class='text-center'>Activity Name</th>" +
                                "</tr>" +
                                "</thead>" +
                                "</table>" +
                                "</div>";
                        }); // for Layer 2
                        project += "</div>" + "</div>";
                    }); // for Layer 1
                    $("#projectDetail2").append(project);
                } else {}
            },
            error: function(e) {}
        });
    }
});

Answer 1

我刚刚通过删除此数据表得到了解决方案。

$('#Layer3Table').DataTable({
    ajax: {
        url: "exampleData/activity.json"
    },
    columns: [{
            data: "l1_task.0.l2_task.0.l3_task.0.l3_id"
        },
        {
            data: "l1_task.0.l2_task.0.l3_task.0.l3_name"
        }
    ],
});

并在此部分启动数据表

}); // for Layer 1
    $("#projectDetail2").append(project);
    $('#Layer3Table').DataTable();
} else {}