Блог

У меня есть объект JSON, как показано ниже (источник данных), в этом объекте JSON свойство ‘viewClasses’ иногда является пустым, здесь я хочу сделать, если у ‘viewClasses’ есть какая-либо запись, я хочу добавить динамический столбец в таблицу, а имя заголовка столбца будет значением’viewClasses.class ‘, я попробовал приведенный ниже код, но он работает не так, как ожидалось.

Вот результат приведенного ниже кода —

Вот как я хочу, чтобы это было-

 var dataSource = [{
  "Name": "PI61890",
  "portfolioName": "PGIM Emerging Markets Debt Local Currency Fund",
  "StartDate": "2020-10-31T00:00:00",
  "EndDate": "2020-10-31T00:00:00",
  "processDate": "2020-10-31T00:00:00",
  "viewDetails": {
    "Name": "Management",
    "Code": "MGMT",
    "category": "Asset",
    "description": "Asset Description",
    "viewClasses": [{
        "class": "A",
        "amount": 2000.0
      },
      {
        "class": "B",
        "amount": 3000.0
      }
    ]
  },
}];

var column = [];

function AddColumn() {
  $.each(dataSource[0].viewDetails.viewClasses[0], function(key, value) {
    var my_item = {};
    my_item.data = key;
    my_item.title = key;
    column.push(my_item);
  });
}

$('#example').dataTable({
  data: dataSource[0].viewDetails.viewClasses,
  "columns": column,
  "paging": false,
  "bInfo": false
});  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<style src="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <table id="example" class="table table-striped" width="100%"></table>
    </div>
  </div>
</div>  

Ваши исходные данные необходимо перебирать двумя различными способами, чтобы построить два разных динамических массива, которые нужны DataTables: — данные столбцов и данные строк.

Во-первых, у вас есть два столбца, A и B . Чтобы построить массив для них, вы можете использовать следующее:

 var dynamicColumns = [];

columnData.forEach(function (columnItem) {
  // extract the column definitions:
  var dynamicColumn = {};
  dynamicColumn['data'] = columnItem['class'];
  dynamicColumn['title'] = 'Heading '   columnItem['class'];
  dynamicColumns.push(dynamicColumn);
});
  

Я решил не использовать итератор jQuery, потому что мне нужен доступ к каждому объекту в массиве.

Это дает мне следующую структуру:

 [
  {
    "data": "A",
    "title": "Heading A"
  },
  {
    "data": "B",
    "title": "Heading B"
  }
]
  

Но для данных таблицы я хочу получить только одну строку данных:

 var dynamicRow = {};
  
columnData.forEach(function (columnItem) {
  // extract the data set:
  var field = columnItem['class'];
  var value = columnItem['amount'];
  dynamicRow[field] = value;
});
dynamicRows.push(dynamicRow);
  

Здесь я заканчиваю следующим:

 [
  {
    "A": 2000,
    "B": 3000
  }
]
  

Теперь у меня есть структуры, которые мне нужны для моей инициализации DataTable. Таким образом, общий сценарий выглядит следующим образом:

 <script type="text/javascript">

var dataSource = [{
  "Name": "PI61890",
  "portfolioName": "PGIM Emerging Markets Debt Local Currency Fund",
  "StartDate": "2020-10-31T00:00:00",
  "EndDate": "2020-10-31T00:00:00",
  "processDate": "2020-10-31T00:00:00",
  "viewDetails": {
    "Name": "Management",
    "Code": "MGMT",
    "category": "Asset",
    "description": "Asset Description",
    "viewClasses": [{
        "class": "A",
        "amount": 2000.0
      },
      {
        "class": "B",
        "amount": 3000.0
      }
    ]
  },
}];

var dynamicColumns = [];
var dynamicRows = [];

function buildDynamicData() {

  var columnData = dataSource[0].viewDetails.viewClasses;
  
  var dynamicRow = {};
  
  columnData.forEach(function (columnItem) {
    // extract the column definitions:
    var dynamicColumn = {};
    dynamicColumn['data'] = columnItem['class'];
    dynamicColumn['title'] = 'Heading '   columnItem['class'];
    dynamicColumns.push(dynamicColumn);
    
    // extract the data set:
    var field = columnItem['class'];
    var value = columnItem['amount'];
    dynamicRow[field] = value;
  });
  dynamicRows.push(dynamicRow);

}

buildDynamicData();

console.log(dynamicColumns);
console.log(dynamicRows);

  $(document).ready(function() {
  
$('#example').DataTable({
  columns: dynamicColumns,
  data: dynamicRows,
  paging: false,
  info: false
});


  } );

</script>
  

И конечный результат выглядит так (в моей тестовой среде):