Блог

Главная - Вопросы по программированию - Как преобразовать данные, разделенные точкой с запятой, в отдельные строки в ячейке с данными

Как преобразовать данные, разделенные точкой с запятой, в отдельные строки в ячейке с данными

#javascript #jquery #datatables

#javascript #jquery #таблицы данных

Вопрос:

У меня есть массив в документе JSON. Ниже приведен один элемент из этого массива:

 {
    "generalSolution": "Cloud",
    "generalOperator": "MTN",
    "genericCountry": "USA",
    "vnfProductName": "vEPG;vSAPC;vSGSN-MME",
    "vnfRelease": "2.4;1.3;v1.2399999",
    "vnfVendor": "Ericsson;Ericsson;Ericsson"
}

Я хотел бы отобразить данные в таблицах данных в виде одной строки, например:

введите описание изображения здесь

Обратите внимание, что vnf details ( vnfProductName , vnfRelease , vnfVendor ) может иметь переменное количество записей.

Комментарии:

1. Для jquery очень хороший плагин с данными: datatables.net но это табличное представление также простое — 0,6 <td> на один <tr> данных.

2. @Zydnar: Спасибо за идею. Но я не хочу отображать их таким образом, так как позже мне придется конвертировать данные в Excel, где это вызовет проблемы

3. @srilakshmi: Насколько я знаю, нет общего разделителя, понимаемого как «новая строка» как в Excel, так и в HTML, поэтому экспорт в Excel с возвращением точек с запятой на место может быть достигнут, используя format.body опцию метода buttons.exportData() API.

Ответ №1:

Используйте render опцию для преобразования ваших данных при рендеринге:

 //use JSON excerpt as a data source
var srcData = [{
    "generalSolution": "Cloud",
    "generalOperator": "MTN",
    "genericCountry": "USA",
    "vnfProductName": "vEPG;vSAPC;vSGSN-MME",
    "vnfRelease": "2.4;1.3;v1.2399999",
    "vnfVendor": "Ericsson;Ericsson;Ericsson"
}];

//initialize DataTables
const dataTables = $('#mytable').DataTable({
  data: srcData,
  dom: 't',
  //map all property keys (assuming, set of properties is uniform for all array entries)
  //into array, expected by 'columns' option: [{title: ..., data: ...}...]
  columns: Object.keys(srcData[0]).map(propertyKey => ({title: propertyKey, data: propertyKey})),
  //use additionally 'columnDefs' option to apply 'render' callback to certain columns
  columnDefs: [{
    targets: [3, 4, 5],
    //replace semicolons in each cell contents within columns 3, 4, 5 with new line tag `<br>`
    render: (data, type, row, meta) => data ? data.replace(/;/g, '<br>') : ''
  }]
}); 
 <!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>

Комментарии:

1. Спасибо .. это помогает… В то же время я могу сделать что-то вроде этого. { «data»: «vnfVendor», render: (данные, тип, строка, мета) => data.replace(/;/g, ‘<br>’) }, { «data»: «vnfProductName», render: (данные, тип, строка, мета) => data.replace(/;/g, ‘<br>’) }, { «data»: «vnfRelease», render: (данные, тип, строка, мета) => data.replace(/;/g, ‘<br>’) },

2. Да, вы можете, но есть ли причина, по которой вам нужно было бы сделать это вместо использования одной общей функции рендеринга для всех целевых столбцов (как это сделано в моем примере)?

3. @srilakshmi: И, к вашему сведению, мое решение имеет небольшое преимущество перед другим событием ответа, хотя мы используем по существу тот же метод, я интегрировал свой код в render option, который будет работать независимо от источника данных. Другой ответ потребует переноса блока ‘replacing’ в другой итератор для перебора всего массива, а затем поместить его в ajax.success ajax.dataSrc параметр или, если используется AJAX-source (что, насколько я понимаю, имеет место).).

4. Потому что у меня есть еще такой код. defs = [{ «targets»: ‘_all’, «visible»: true, «orderable»: true }, поэтому вместо all, когда я указывал номера столбцов, отображались только эти три столбца. Итак, я хотел попробовать этот способ

5. Вот почему, columnDefs ожидает массив объектов, таким образом, вы можете сделать [{targets:[3,4,5],render:(data,type,row,meta)=>data.replace(/;/g,'<br>')},{"targets":'_all',"visible":true,"orderable":true}]

Ответ №2:

Просто замените ; на <br> с String#replace .

Это пример. Здесь исходный объект изменяется. Подумайте о том, чтобы адаптировать id, если это необходимо.

 $(document).ready(() => {
  const obj = {
    "generalSolution": "Cloud",
    "generalOperator": "MTN",
    "genericCountry": "USA",
    "vnfProductName": "vEPG;vSAPC;vSGSN-MME",
    "vnfRelease": "2.4;1.3;v1.2399999",
    "vnfVendor": "Ericsson;Ericsson;Ericsson"
  };

  for (let key in obj) {
    // Here!
    obj[key] = obj[key].replace(/;/g, '<br>');
  }
  
  $('#dt').DataTable({
    data: [obj],
    columns: [
      {data: 'generalSolution'},
      {data: 'generalOperator'},
      {data: 'genericCountry'},
      {data: 'vnfProductName'},
      {data: 'vnfRelease'},
      {data: 'vnfVendor'}
    ]
  });
}); 
 <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="dt">
  <thead>
    <tr>
      <th>generalSolution</th>
      <th>generalOperator</th>
      <th>genericCountry</th>
      <th>vnfProductName</th>
      <th>vnfRelease</th>
      <th>vnfVendor</th>
    </tr>
  </thead>
</table>

Метки: , ,