строка группировки таблицы ajax json

ProgramBox

строка группировки таблицы ajax json

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #json #ajax

Вопрос:

Скажи мне, пожалуйста. Я только начал изучать 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>'
                );
        });
    }
});```

Все работает, единственное, что я хочу сделать, — это вложенные строки, но я не знаю, как это сделать. То есть пройдите по Отделу и перечислите всех, кто имеет к нему отношение ..
Это то, чего я пытаюсь достичь
Группировка Строк

Ответ №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.JsonResu< // 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.JsonResu< // to save typing amp; 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>

1. Спасибо, братан! И вы не можете сказать мне, как сортировать таблицу в соответствии с определенным алгоритмом. Точнее, колонка заголовка. Я хочу сделать что-то вроде этого: в каждом отделе сначала были программисты, затем программисты, и только потом системные администраторы. Все это приблизительные данные

2. @Азат Ваше дополнительное требование не имеет никакого отношения к названию вашего первоначального вопроса. Речь идет о сортировке, которая является совершенно другой темой. В любом случае, я добавил решение.

3. Да, вы правы, вопрос не по теме. Ваша сортировка работает без проблем, если вы сначала не сгруппируете по значению отдела. Но если вы сгруппируете, а затем отсортируете по должности в каждом отделе, произойдет что-то, что мне непонятно ((

4. @Азат Сортировку также можно выполнить в базе данных, возможно, более эффективно. Например, в Sql это можно сделать простым ORDER BY Department, Title способом . Вы должны работать с бэкенд-специалистами, чтобы данные были отсортированы так, как вы хотите. Даже если вы хотите сделать это в Javascript, это все равно возможно, скажем, путем сортировки нескольких раундов. Если название уникально для всех отделов, то сортировка по названию всегда будет означать, что данные будут сгруппированы по отделам.

5. Да, вы говорите правильно, как всегда. Спасибо

Метки: строка группировки таблицы ajax json