Почему мои dataTables не отображаются с использованием $ .each внутри функции?

Question

У меня есть вложенный массив json объекта (Слой 1, Слой 2 и Слой 3). Моя проблема в dataTables не появляется. Любые связанные CDN были импортированы. В таблице просто отображается только <thead> раздел. Я ссылался на многие веб-сайты, но это не решило мою проблему.

Ранее я использовал стандартную таблицу для отображения значений внутри слоя 3 json, используя <tbody>, <tr> и <td>, сделайте Результат успешен. Но теперь я удалил все это и попытался использовать dataTable, так как мне нужны его функции.

Я успешно отобразил id значения для уровня 1 и уровня 2. Но для моего случая ниже отображение информации уровня 3 безуспешно (l3_id, l3_name, et c ..) в таблицах данных.

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

Я только что получил решение, удалив эти dataTables.

$('#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"
        }
    ],
});

и запустил dataTables в этом разделе

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

Answer 2

ОБНОВЛЕНИЕ

Хорошая работа по выяснению этого самостоятельно, OP. Я включу решение и в мой ответ.

Вы добавляли таблицу после вызова таблиц данных, поэтому имеет смысл перевести вызов в таблицы данных после добавления таблицы с данными в ней. Я должен был поймать это, хорошая работа!

---

Ваша функция успеха не l oop через l3_task. Попробуйте это ..

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(key1, value1) {
                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>";
                $.each(value1.l3_task, function(k, v) {
                    project +=
                        "<tr>" +
                        "<td>" + v.l3_id + "</td>" +
                        "<td>" + v.l3_name + "</td>" +
                        "</tr>";
                });
                project +=
                    "</table>" +
                    "</div>";
            }); // for Layer 2
            project += "</div></div></div></div>";
        }); // for Layer 1
        $("#projectDetail2").append(project);
        $('#Layer3Table').DataTable();
    } else {}
},