如何使用 jQuery 显示来自 JSON 的多个数组？

Question

如何使用 jQuery 显示来自 API (JSON) 的多个数组？当前的方法我正在使用each函数，不幸的是结果并不符合预期。结果应该与继承的 JSON 相同。

当前结果：单独显示

预期结果：显示如下，div 3 位于 div 2 内，div 2 位于 div 1 内。

超文本标记语言

<div class="container-fluid" id="projectDetail">

    <div class="row mt-3 view_result">

        // all the result will be display here

    </div>

</div>

JS

$(document).ready(function(){

    var project = '';

    var L1 = '';

    var L2 = '';

    var L3 = '';

    $.ajax({

        url : url_project_detail,

        type : 'POST',

        dataType : 'json',

        data: "data",

        success: function(response){

            if (response.status == "Success"){

                // Layer Project Name

                $.each(response.data, function(key, value){

                project = "<div class='text-danger card container'><span>"+value.project_name+" - </span>"

                $("#projectDetail .view_result").append(project);

                    // Layer MVP

                    $.each(value.l1_task, function(key, value){

                    L1 = "<div class='card bg-info pd-10 container'><span>"+value.l1_name+" Layer MVP - </span>"

                    $("#projectDetail .view_result").append(L1);

                        // Layer Sprint

                        $.each(value.l2_task, function(key, value){

                        L2 = "<div class='card bg-warning pd-20 container'><span>"+value.l2_name+" Layer Sprint - </span>"

                        $("#projectDetail .view_result").append(L2);

                            // Layer Task

                            $.each(value.l3_task, function(key, value){

                            L3 = "<div class='card bg-dark container'><span>"+value.l3_name+" Layer Task - </span>"+

                            "</div>" // for Layer Task

                            $("#projectDetail .view_result").append(L3);                            

                            });

                        var close = "</div>" // for Layer Sprint

                        $("#projectDetail .view_result").append(close);

                        });

Answer 1

您只能使用一个变量，即：project并将您的变量附加到每个循环中html使用的变量，最后您可以将其附加到您的 div 中。工作代码：+=projectvar response = {&nbsp; "status": "Success",&nbsp; "data": [{&nbsp; &nbsp; &nbsp; "project_id": "1",&nbsp; &nbsp; &nbsp; "project_name": " Project Name ",&nbsp; &nbsp; &nbsp; "l1_task": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l1_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l1_name": " MVP 1 ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l2_task": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l2_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l2_name": " Sprint 1 ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_task": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_name": " Sprint 1 Task&nbsp; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_name": " Sprint 1 Task 2 "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l1_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l1_name": " MVP 2 ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l2_task": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l2_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l2_name": " Sprint 1 ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_task": [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_name": " Sprint 1 Task&nbsp; 1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_id": "1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "l3_name": " Sprint 1 Task 2 "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]};if (response.status == "Success") {&nbsp; // Layer Project Name&nbsp; $.each(response.data, function(key, value) {&nbsp; &nbsp; project = "<div class='text-danger card container'><span>" + value.project_name + " - </span>";&nbsp; &nbsp; // Layer MVP&nbsp; &nbsp; $.each(value.l1_task, function(key, value) {&nbsp; &nbsp; &nbsp; project += "<div class='card bg-info pd-10 container'><span>" + value.l1_name + " Layer MVP - </span>";&nbsp; &nbsp; &nbsp; // Layer Sprint&nbsp; &nbsp; &nbsp; $.each(value.l2_task, function(key, value) {&nbsp; &nbsp; &nbsp; &nbsp; project += "<div class='card bg-warning pd-20 container'><span>" + value.l2_name + " Layer Sprint - </span>";&nbsp; &nbsp; &nbsp; &nbsp; // Layer Task&nbsp; &nbsp; &nbsp; &nbsp; $.each(value.l3_task, function(key, value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; project += "<div class='card bg-dark container'><span>" + value.l3_name + " Layer Task - </span>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</div>"; // for Layer Task&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; project += "</div>";&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; project += "</div>";&nbsp; &nbsp; });&nbsp; &nbsp; project += "</div>" // for Layer Sprint&nbsp; &nbsp; $("#projectDetail .view_result").append(project);&nbsp; });} else {&nbsp; // else}<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- Popper JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><div class="container-fluid" id="projectDetail">&nbsp; <div class="row mt-3 view_result">&nbsp; </div></div>