Отобразить верхний колонтитул в таблице

Question

Я написал Jquery, который преобразует результат в Pivot, который работает как положено. Но мне нужна небольшая помощь

var array1 = [];

var jsonArray = [{
  "Chapter": "Chemistry",
  "StudentModel": [{
    "StudentName": "Ankit",
    "StudentId": 100,
    "Marks": 23,
    "ResultDate": "01/23/20"
  }, {
    "StudentName": "Ankit",
    "StudentId": 186,
    "Marks": 50,
    "ResultDate": "02/06/20"
  },
  {
    "StudentName": "Anirudh",
    "StudentId": 201,
    "Marks": 50,
    "ResultDate": "02/06/20"
  }
  ]
}, {
  "Chapter": "Physics",
  "StudentModel": [{
    "StudentName": "Rahul",
    "StudentId": 200,
    "Marks": 1.2,
    "ResultDate": "01/23/20"
  }]
}]

$.each(jsonArray, function(index, item) {
  //array.push(item.ChapterHeading);
  $.each(item.StudentModel, function(index, item) {
    var array = [];
    array.push(item.StudentName);
    array.push(item.Marks);
    array.push(item.ResultDate);
    array1.push(array);
  });

});

function getPivotArray(dataArray, rowIndex, colIndex, dataIndex) {
  var result = {},
    ret = [];
  var newCols = [];
  for (var i = 0; i < dataArray.length; i++) {

    if (!result[dataArray[i][rowIndex]]) {
      result[dataArray[i][rowIndex]] = {};
    }
    result[dataArray[i][rowIndex]][dataArray[i][colIndex]] = dataArray[i][dataIndex];

    //To get column names
    if (newCols.indexOf(dataArray[i][colIndex]) == -1) {
      newCols.push(dataArray[i][colIndex]);
    }
  }

  newCols.sort();
  var item = [];

  //Add Header Row
  item.push('StudentName');
  item.push.apply(item, newCols);
  ret.push(item);

  //Add content 
  for (var key in result) {
    item = [];
    item.push(key);
    for (var i = 0; i < newCols.length; i++) {
      item.push(result[key][newCols[i]] || "N/A");
    }
    ret.push(item);
  }
  return ret;
}

function arrayToHTMLTable(myArray) {
  var result = "<table class='table table-striped'>";
  for (var i = 0; i < myArray.length; i++) {
    result += "<tr>";
    for (var j = 0; j < myArray[i].length; j++) {
      result += "<td>" + myArray[i][j] + "</td>";
    }
    result += "</tr>";
  }
  result += "</table>";

  return result;
}



$(function() {
  var output = getPivotArray(array1, 0, 2, 1);
  //$('#orgTable').html(arrayToHTMLTable(arr));
  $('#pivotTable').html(arrayToHTMLTable(output));

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pivotTable"></div>

В верхней части списка я хотел бы отобразить заголовок, как для Ankit и Anirudh это должно быть Химия и для Рахул сверху должно отображаться Физика . Может ли кто-нибудь помочь мне, чтобы это было похоже на

Answer 1

Я сделал какой-то трюк и смог его получить

var headerCols = [];
var firstItem = "";
var array1 = [];
var newCols = [];

var jsonArray = [{
  "Chapter": "Chemistry",
  "StudentModel": [{
    "StudentName": "Ankit",
    "StudentId": 100,
    "Marks": 23,
    "ResultDate": "01/23/20"
  }, {
    "StudentName": "Ankit",
    "StudentId": 186,
    "Marks": 50,
    "ResultDate": "02/06/20"
  }, {
    "StudentName": "Anirudh",
    "StudentId": 201,
    "Marks": 50,
    "ResultDate": "02/06/20"
  }]
}, {
  "Chapter": "Physics",
  "StudentModel": [{
    "StudentName": "Rahul",
    "StudentId": 200,
    "Marks": 1.2,
    "ResultDate": "01/23/20"
  }]
}]

$.each(jsonArray, function(index, chapter) {
  //array.push(item.ChapterHeading);
  $.each(chapter.StudentModel, function(index, item) {
    var array = [];
    if (index === 0) {
      firstItem = item.StudentName;
    }
    var is_last_item = (index == (chapter.StudentModel.length - 1));
    array.push(item.StudentName);
    array.push(item.Marks);
    array.push(item.ResultDate);
    array1.push(array);
    if (is_last_item) {
      array.push(firstItem + "_" + chapter.Chapter);
    }
  });

});

function getPivotArray(dataArray, rowIndex, colIndex, dataIndex, headerCol) {
  var result = {},
    ret = [];
  for (var i = 0; i < dataArray.length; i++) {

    if (!result[dataArray[i][rowIndex]]) {
      result[dataArray[i][rowIndex]] = {};
    }
    result[dataArray[i][rowIndex]][dataArray[i][colIndex]] = dataArray[i][dataIndex];
    if (dataArray[i][headerCol] !== undefined) {
      headerCols.push(dataArray[i][headerCol]);
    }

    //To get column names
    if (newCols.indexOf(dataArray[i][colIndex]) == -1) {
      newCols.push(dataArray[i][colIndex]);
    }
  }

  newCols.sort();
  var item = [];

  //Add Header Row
  item.push('StudentName');
  item.push.apply(item, newCols);
  ret.push(item);

  //Add content 
  for (var key in result) {
    item = [];
    item.push(key);
    for (var i = 0; i < newCols.length; i++) {
      item.push(result[key][newCols[i]] || "N/A");
    }
    ret.push(item);
  }
  return ret;
}

function arrayToHTMLTable(myArray) {
  var colName = '';
  var position = 0;
  var result = "<table class='table table-striped'>";
  for (var i = 0; i < myArray.length; i++) {
    position = i;
    colName = myArray[position][0];
    $.each(headerCols, function(i, header) {
      var splitHeader = header.split("_");
      if (colName !== undefined && splitHeader[0] === colName) {
        result += "<tr style='background-color:#DBF3FA;'><td colspan=" + newCols.length + 1 + ">" + splitHeader[1] + "</td></tr>";
      }
    })
    result += "<tr>";
    for (var j = 0; j < myArray[i].length; j++) {
      result += "<td>" + myArray[i][j] + "</td>";
    }
    result += "</tr>";
  }
  result += "</table>";

  return result;
}



$(function() {
  var output = getPivotArray(array1, 0, 2, 1, 3);
  //$('#orgTable').html(arrayToHTMLTable(arr));
  $('#pivotTable').html(arrayToHTMLTable(output));

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pivotTable"></div>