How to display data in html table?

Question

PHP

There is data:

[
    [
        'type'  => 'type1',
        'pages' => [ 
            ['name' => 'page1', 'attribute' => ['atr1', 'atr2', 'atr3', 'atr4']],
            ['name' => 'page2', 'attribute' => ['atr1', 'atr2', 'atr3']],
            ['name' => 'page3', 'attribute' => ['atr1', 'atr2']],
        ]  
    ]
]

You need to display them on the page in the form of an HTML table:

+———————+———————+———————+
| page1 | page2 | page3 |
+———————+———————+———————+
| atr1  | atr1  | atr1  |
+———————+———————+———————+
| atr2  | atr2  | atr2  |
+———————+———————+———————+
| atr3  | atr3  |       |
+———————+———————+———————+
| atr4  |       |       |
+———————+———————+———————+

The main problem that I encountered when iterating through the loop foreachis that the html table is formed by rows, and the data is read by columns.

How to do it in this format (with empty cells and structure preservation)?

Answer 1

$headers = array_column($data[0]['pages'], 'name');
$columns = array_column($data[0]['pages'], 'attribute');
$rowCount = max(array_map('count', $columns));

$headersHTML = implode('', array_map(function($n) {
  return "<th>$n</th>";
}, $headers));

$rowsHTML = implode('', array_map(function($i) use($columns) {
  return "
    <tr>".implode('', array_map(function($n) use($i) {
        return "<td>".($n[$i] ?? '')."</td>";
      }, $columns))."
    </tr>";
}, range(0, $rowCount - 1)));

echo "
  <table>
    <thead>
      <tr>$headersHTML</tr>
    </thead>
    <tbody>$rowsHTML</tbody>
  </table>";

Answer 2

<table id = 'myEmptyTable'>
  <tbody></tbody>
</table>
<script type="text/javascript">
  json = [
        	{
              'type'  : 'type1',
              'pages' : [ 
                  {'name' : 'page1', 'attribute' : ['atr1', 'atr2', 'atr3', 'atr4']},
                  {'name' : 'page2', 'attribute' : ['atr1', 'atr2', 'atr3']},
                  {'name' : 'page3', 'attribute' : ['atr1', 'atr2']},
              ]  
          }
      ];
  function createTableByJson(jsonPages){
    var tableTbody = document.querySelector('#myEmptyTable tbody');
    for (var i = 0; i < jsonPages.length; i++) {
      //перебираем строки
      for (var y = 0; y < jsonPages[i].attribute.length; y++) {
        //проверяем сколько строк уже создано в таблице
        if (tableTbody.getElementsByTagName('tr').length < y + 1) {
          //если строк меньше то создаем новую
          var newRow = document.createElement('tr');
          tableTbody.appendChild(newRow);
          //тк мы уже знаем что строк было меньше чем нужно добавляем по пустому элементу td в текущую строку, пока не дойдем до текущего столбца
          for (var z = 0; z < i; z++) {
            newRow.appendChild(document.createElement('td'));
          }
        }

        //создаем новую ячейку 
        var newCell = document.createElement('td');
        //вписываем туда текст
        newCell.innerText = jsonPages[i].attribute[y];
        //и добавляем его в строку
        tableTbody.getElementsByTagName('tr')[y].appendChild(newCell);

      }
      //после того как перебрали столбец в json вписываем пусты ячеки в кажду строку что больше числа atribute в текущем столбце
      for (var g = y; g < tableTbody.getElementsByTagName('tr').length; g++) {
        tableTbody.getElementsByTagName('tr')[g].appendChild(document.createElement('td'));
      }
    }
  }
  createTableByJson(json[0].pages)
</script>

Answer 3

I wrote from the phone, most likely there are jambs,
but for an example it will do

$count = $json['pages'];

$dept = [];

for($d = 0; $d < $count; $d++) {
    $dept[] = count($json['pages][$d]['attribute'];
}

$max = max($dept);

echo '<table><tr>';

for ($i = 0; $i < $count; $i++) {
    echo '<th>' . $json['pages][$i]['name'] . '</th>';
} // заголовок
echo '</tr>';

while(++$x < $max) {
    echo '<tr>';
    for($k = 0; $k < $count; $k++) {
        echo '<td>' .  ($json['pages'][$k]['attribute][$x] ?? '') . '</td>';
    }
    echo '</tr>';
}

echo '</table>';