Tell me please. I just started learning ajax and would like to ask for a more detailed explanation (if possible). The problem is as follows, I receive JSON from the server of the following type

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

and output them through:

 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>'
                );
        });
    }
});```

Everything works, the only thing I want to do is nested lines, but I don’t know how to do it. That is, iterate over the Department and list everyone who is related to it .. This is what I am trying to achieve Grouping Rows

CodePudding user response：

Replace the anonymous function in the success object with the one shown below:

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Your data.JsonResult is a Javascript array. A native method for iterating through each element in an array is forEach.

To do grouping in the Html table, the data should be sorted by the grouping attribute, ie Department. I then use a variable dept to detect when the Department in the next row of data has changed.