Как отобразить несколько массивов из JSON, используя jQuery?

Question

Как отобразить несколько массивов из API (JSON), используя jQuery? Текущий метод Я использую функцию each, к сожалению, результат не так, как ожидалось. Результат должен совпадать с JSON, который наследуется.

Текущий результат: Отображается отдельно

Ожидаемый результат: Для отображения, как показано ниже, div 3 внутри div 2 и div 2 внутри div 1.

HTML

<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 к ней, используя += в каждом l oop, наконец, вы можете добавить эту project к вашему div. Рабочий код:

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>