如何使用 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 中。工作代码：+=project

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>