如何使用 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); });
1 回答
隔江千里
TA貢獻1906條經驗 獲得超10個贊
您只能使用一個變量，即：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>
- 1 回答
- 0 關注
- 124 瀏覽
添加回答
舉報
0/150
提交
取消