如何使用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);
                        });

                    var close = "</div>" // for Layer MVP
                    $("#projectDetail .view_result").append(close);
                    });

                var close = "</div>" // Layer Project Name
                $("#projectDetail .view_result").append(close);
                });
            }
            else {
                // else
            }            
        },
        error: function(e){
            // error
        }
    });
});

JSON

{
    "status": "Success",
    "data": [
        {
            "project_id": "1",
            "project_name": " Project Name ",
            "l1_task": [
                {
                    "l1_id": "1",
                    "l1_name": " MVP 1 ",
                    "l2_task": [
                        {
                            "l2_id": "1",
                            "l2_name": " Sprint 1 ",
                            "l3_task": [
                                {
                                    "l3_id": "1",
                                    "l3_name": " Sprint 1 Task  1"
                                },
                                {
                                    "l3_id": "1",
                                    "l3_name": " Sprint 1 Task 2 "
                                }
                            ]
                        }
                    ]
                },
                {
                    "l1_id": "1",
                    "l1_name": " MVP 2 ",
                    "l2_task": [
                        {
                            "l2_id": "1",
                            "l2_name": " Sprint 1 ",
                            "l3_task": [
                                {
                                    "l3_id": "1",
                                    "l3_name": " Sprint 1 Task  1"
                                },
                                {
                                    "l3_id": "1",
                                    "l3_name": " Sprint 1 Task 2 "
                                }
                            ]
                        }
                    ]
                }

            ]
        }

    ]
}

Answer 1

您只能使用一个变量，即：project，并在每个循环中使用+=将您的html附加到该变量中，最后，您可以将这个project附加到div .Working代码中：

​

var response = {
  "status": "Success",
  "data": [{
      "project_id": "1",
      "project_name": " Project Name ",
      "l1_task": [{
          "l1_id": "1",
          "l1_name": " MVP 1 ",
          "l2_task": [{
            "l2_id": "1",
            "l2_name": " Sprint 1 ",
            "l3_task": [{
                "l3_id": "1",
                "l3_name": " Sprint 1 Task  1"
              },
              {
                "l3_id": "1",
                "l3_name": " Sprint 1 Task 2 "
              }
            ]
          }]
        },
        {
          "l1_id": "1",
          "l1_name": " MVP 2 ",
          "l2_task": [{
            "l2_id": "1",
            "l2_name": " Sprint 1 ",
            "l3_task": [{
                "l3_id": "1",
                "l3_name": " Sprint 1 Task  1"
              },
              {
                "l3_id": "1",
                "l3_name": " Sprint 1 Task 2 "
              }
            ]
          }]
        }

      ]
    }

  ]
};
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>";

    // Layer MVP
    $.each(value.l1_task, function(key, value) {
      project += "<div class='card bg-info pd-10 container'><span>" + value.l1_name + " Layer MVP - </span>";
      // Layer Sprint
      $.each(value.l2_task, function(key, value) {
        project += "<div class='card bg-warning pd-20 container'><span>" + value.l2_name + " Layer Sprint - </span>";
        // Layer Task
        $.each(value.l3_task, function(key, value) {
          project += "<div class='card bg-dark container'><span>" + value.l3_name + " Layer Task - </span>" +

            "</div>"; // for Layer Task
        });
        project += "</div>";
      });
      project += "</div>";
    });
    project += "</div>" // for Layer Sprint
    $("#projectDetail .view_result").append(project);

  });
} else {
  // 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">

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

  </div>

</div>

​