如何使用 jQuery 显示来自 JSON 的多个数组？
Posted
技术标签:
【中文标题】如何使用 jQuery 显示来自 JSON 的多个数组？【英文标题】：How to display multiple array sourced from JSON using jQuery? 【发布时间】：2020-06-19 03:20:45 【问题描述】：如何使用 jQuery 显示来自 API (JSON) 的多个数组？当前方法我正在使用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 "
]
]
]
]
【问题讨论】：
你也可以添加css吗？ 只使用标准引导 css。 【参考方案1】：您只能使用一个变量，即：project 并在每个循环中使用 += 将您的 html 附加到该变量上，最后您可以将此 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>【讨论】：
非常感谢！你太棒了！......它的工作原理。为你点赞。 从您的回答中，我只想知道，我在上述情况下使用手风琴。那么点击MVP时如何通过ID进行区分呢？当前的问题是当我点击MVP 2 Layer MVP 时，MVP 1 将反映打开/关闭。每个MVP应该有不同的ID，对吗？如何让它更有活力？我你有个主意。
可能使用计数器并为每个MVP div 分配动态ID。以上是关于如何使用 jQuery 显示来自 JSON 的多个数组？的主要内容，如果未能解决你的问题，请参考以下文章
使用循环在 HTML 中显示来自 jQuery.ajax 的 json 数据
使用 jquery 和 ajax 显示来自 mysql 的数据
使用来自外部 JSON 的 JQuery 的自动完成表单字段不起作用
如何使用多个 jquery 版本以便 ResponsiveSlides.js 工作？