Как вывести данные в html таблицу?

Question

[velax]

Есть данные:

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

Нужно вывести их на страницу в форме HTML таблицы:

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

Основная проблема с которой я столкнулся при переборе циклом foreach это то, что html таблица формируется строками, а данные считываются колоннами.

Как это сделать именно в таком формате (с пустыми ячейками и сохранением структуры)?

Comments

[Дмитрий]

Тут нужен будет цикл for

[Дмитрий]

Написали даже несколько вариантов, даже на js один. Так что выбирайте/отмечайте

[d'Ivan]

Получить транспонированную матрицу, а дальше как обычно таблицу выводить или с DataTables (jQuery) и подобными.

Answer 1

[0xD34F]

$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

[stepa90]

<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

[Дмитрий]

Писал с телефона, скорее всего косяки есть
Но для примера пойдёт

$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>';