ajax json表分组行

Question

请告诉我。我刚开始学习ajax，想要一个更详细的解释(如果可能的话)。问题如下，我从服务器接收到以下类型的JSON

{"JsonResult":[{"Name":"Иванов Иван Иванович","Email":"IvanovII","Title":"Что-то еще","Department":"IT"}

并通过:

输出

function getData() {var $tbl = $('#tblInfo');
$.ajax({
url: $("#Get").val(),
type: 'GET',
datatype: 'json',
success: function (data) {
$tbl.empty();
$.each(data.JsonResult, function (i, model) {
$tbl.append
(
'<tr>' +
'<td>' + model.Name + '</td>' +
'<td>' + model.Email + '</td>' +
'<td>' + model.Title + '</td>' +
'<tr>'
);
});
}
});```

一切正常，我唯一想做的是嵌套行，但我不知道怎么做。也就是说，遍历Department列出所有与之相关的人……这就是我想要达到的目标分组行

Answer 1

将success对象中的匿名函数替换为如下所示:

// Simulate some data for the purpose of testing:
const data = {"JsonResult":[
{"Name":"Iron Man", "Email": "IM", "Title": "Rocket", "Department": "Super Heroes"},
{"Name":"Иванов Иван Иванович", "Email":"IvanovII", "Title":"Что-то еще", "Department":"IT"},
{"Name":"Wonder Woman", "Email": "WW", "Title": "Wonder", "Department": "Super Heroes"},
{"Name":"Bill Gates", "Email":"BG", "Title":"Coder", "Department":"IT"}
]};
// For purpose of testing, assign the anonymous function to a
// variable so that it can be invoked.
const success = 
function (data) {
const $tbl = $("#tblInfo");
// $tbl.empty();
data = data.JsonResult; // to reduce typing
// First sort the data by Department
data.sort((a,b) => a.Department<b.Department ? -1 : 1);

let dept = "";
data.forEach(model => {
if (dept !== model.Department) {
dept = model.Department;
$tbl.append("<tr><th colspan='3'>" + dept + "</th></tr>");
}
$tbl.append('<tr><td>' + model.Name + '</td>' +
'<td>' + model.Email + '</td>' +
'<td>' + model.Title + '</td></tr>'
);
});
}
// Test the function:
success(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="tblInfo" border="1">
<thead><th>Name</th><th>Email</th><th>Title</th></thead>
</table>

data.JsonResult是一个Javascript数组。一个遍历数组中每个元素的本地方法是forEach。

要在Html表中进行分组，数据应按分组属性排序，即Department。然后，我使用变量dept来检测下一行数据中的Department何时发生了变化。

---

要回答评论中给出的额外要求，请修改排序算法如下:

// Simulate some data for the purpose of testing:
const Data = {"JsonResult":[
{"Name":"Steve Jobs", "Title": "Administrator", "Department": "IT"},
{"Name":"Иванов Иван Иванович", "Title":"Programmer", "Department":"IT"},
{"Name":"Wonder Woman", "Title": "Administrator", "Department": "IT"},
{"Name":"Bill Gates", "Title":"Coder", "Department":"IT"}
]};
const $tbl = $("#tblInfo");
let data = Data.JsonResult; // to save typing & reduce clutter
data.forEach(m => {
$tbl.append(`<tr><td>${m.Name}</td><td>${m.Title}</td><td>${m.Department}</td></tr>`);
});
const sort = (button) => {
/************Include this block**************************/
const sortOrder = [ "Coder", "Programmer", "Administrator" ];
const findIndex = value => sortOrder.findIndex(i => i == value);
/********************************************************/

/*************Replace the sort body**********************/
data.sort((a,b) => {
const ai = findIndex(a.Title);
const bi = findIndex(b.Title);
return ai - bi;
});
/********************************************************/

const sorted = $("#sorted");
data.forEach(m => {
sorted.append(`<tr><td>${m.Name}</td><td>${m.Title}</td><td>${m.Department}</td></tr>`);
});
button.disabled = true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h2>Unsorted original data</h2>
<table id="tblInfo" border="1">
<thead><th>Name</th><th>Title</th><th>Department</th></thead>
</table>
<p>
<button onclick="sort(this)">Sort now!</button>
</p>
<h2>Sorted data</h2>
<table id="sorted" border="1">
<thead><th>Name</th><th>Title</th><th>Department</th></thead>
</table>