How to display multiple array sourced from JSON using jQuery?

Question

How to display multiple array sourced from API (JSON) using jQuery? Current method I am using each function, unfortunately the result is not as expected. The result should be as same as JSON which is inherited.

Current result: It is display separately

Expected Result: To be display as below, div 3 inside div 2, and div 2 inside 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 "
                                }
                            ]
                        }
                    ]
                }

            ]
        }

    ]
}

can you please add css too?

Shiv Patne
– Shiv Patne

2020-03-06 11:49:06 +00:00
Commented Mar 6, 2020 at 11:49 — Shiv Patne
– Shiv Patne, Commented Mar 6, 2020 at 11:49
just using standard bootstrap css.

mastersuse
– mastersuse

2020-03-06 11:50:44 +00:00
Commented Mar 6, 2020 at 11:50 — mastersuse
– mastersuse, Commented Mar 6, 2020 at 11:50

Swati · Accepted Answer · 2020-03-06 15:44:02Z

1

You can use only one variable i.e : project and append your html to that using += in every loop ,lastly you can append this project to your div .Working code :

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>

answered Mar 6, 2020 at 15:44

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mastersuse Over a year ago

Thank you so much! You are awesome!.. it works. upvote for you.

mastersuse Over a year ago

From your answer, just wanna know, I am using accordion for above case. So how to differentiate by ID when clicking the MVP? Current problem is when I click at the MVP 2 Layer MVP, MVP 1 will be reflect which is open/close. It should be have an different ID's for each MVP right? How to make it more dynamic? I you have an idea.

Swati Over a year ago

maybe using counter and assigning dynamic id to each your MVP div.

Collectives™ on Stack Overflow

How to display multiple array sourced from JSON using jQuery?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related