ajaxjson表分組行

請告訴我。我剛開始學習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>'
                );
        });
    }
});```

一切正常，我唯一想做的就是嵌套行，但我不知道該怎么做。也就是說，遍歷部門并列出與之相關的每個人..這就是我想要實作的 分組行

uj5u.com熱心網友回復：

將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> 

標籤：javascript json 阿贾克斯

上一篇：使用AJAX按ASC/DESC順序過濾列中的所有資料

下一篇：<span>的Ajax更新不起作用，如何除錯