How to convert semicolon delimited data into separ

2019-08-17 16:58发布

站内问答 / JavaScript
837 2 5

I have an array within JSON document. Below is one item from that array:

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

I would like to display the data in DataTables as a single row, like this:

enter image description here

Note, that vnf details (vnfProductName, vnfRelease, vnfVendor) can have variable number of entries.

2条回答
不美不萌又怎样
2楼-- · 2019-08-17 17:23

Simply replace ; by <br> with String#replace.

This is an example. Here, the original object is altered. Think to adapt id if needed.

$(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>

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
3楼-- · 2019-08-17 17:39

Use render option to transform your data upon rendering:

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)