Просьба, подсказать, как корректно перебрать подобную json
конструкцию для формирования html таблицы
const response = {"ab":{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","7":"8"},
"ac":{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","7":"8"},
"ad":{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","7":"8"},
"af":{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","7":"8"},
"ar":{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","7":"8"},
"ae":{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","7":"8"},
"ac":{"0":"1","1":"2","2":"3","3":"4","4":"5","5":"6","6":"7","7":"8"}}
на выходе получить
<table>
<thead>
<tr>
<td>ab</td>
<td>ac</td>
<td>ad</td>
<td>af</td>
<td>ar</td>
<td>ae</td>
<td>ac</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
пробовал подобным способом, но возвращает только одну строку в таблицу:
const tr = document.createElement('tr');
const value = Object.values(response);
value.forEach((key, item) => {
console.log(key[item]);
$(tr).append('<td>'+key[item]+'</td>');
})
console.log(tr)
$('tbody').append(tr)
"ab":[1,2,3,4,5,6,7,8]
. Возможно вы не знали, что в JSON присутствуют массивы которые более логичны для построения таблиц.