Как загрузить JSON из API в таблицу html (транспонировано)

Question

Довольно новый для веб-разработки. Мне нужна помощь с преобразованием JSON в таблицу (транспонировано).

Я хочу получить JSON в следующем формате из вызова API

{'name': John
 'age': 18
 'enrolled': ['math','science','english']
} 

и преобразовать это к

|---------------------|-----------------------------|
|      name           |     John                    |
|---------------------|-----------------------------|
|      age            |       18                    |
|---------------------|-----------------------------|
|      enrolled       | ['math','science','english']|
|---------------------|-----------------------------|

Answer 1

Не обрабатывалось выравнивание по центру содержимого, но вы можете транспонировать и форматировать матрицу следующим образом:

1. Преобразование JSON в матрицу
2. Транспонирование строк и столбцов
3. Создание отформатированной матрицы со строковыми значениями
4. Определение ширины каждого столбца с использованием отображаемых значений
5. Форматирование матрицы для печати

let data = [
   { "name": "John",   "age": 77, "enrolled": [ "science" ] },
   { "name": "Paul",   "age": 79, "enrolled": [ "math",   ] },
   { "name": "George", "age": 76, "enrolled": [ "english" ] },
   { "name": "Ringo",  "age": 79, "enrolled": [ "music"   ] }
]

let matrix = transposeMatrix(jsonToMatrix(data))

document.body.appendChild(matrixToTable(matrix));
console.log(formatMatrix(matrix));

function jsonToMatrix(jsonData) {
  let keys = Object.keys(jsonData[0])
  return [keys, ...jsonData.map(item => keys.map(key => item[key]))]
}

function transposeMatrix(matrix) {
  return matrix[0].map((col, i) => matrix.map(row => row[i]))
}

function matrixToTable(matrix) {
  let tableEl = document.createElement('table')
  matrix.forEach(row => {
    let trEl = document.createElement('tr')
    row.forEach(col => {
      let tdEl = document.createElement('td')
      tdEl.textContent = col
      trEl.appendChild(tdEl)
    });
    tableEl.appendChild(trEl)
  })
  return tableEl
}

function formatMatrix(matrix) {
  let formattedValues = matrix.map(row => row.map(col => ' ' + JSON.stringify(col) + ' '))
  let colWidths = formattedValues[0].map(col => 0)
  formattedValues.forEach(row => {
    row.forEach((col, index) => {
      if (col.length > colWidths[index]) {
        colWidths[index] = col.length
      }
    })
  })
  let width = colWidths.reduce((total, colWidth) => total + colWidth, 0)
  let separator = '+' + colWidths.map(colWidth => '-'.repeat(colWidth)).join('+') + '+' + '\n'
  return [
    separator,
    formattedValues.map(row => {
      return [
        '|',
        row.map((col, index) => col.padEnd(colWidths[index], ' ')).join('|'),
        '|\n'
      ].join('')
    }).join(separator),
    separator
  ].join('')
}

table { border-collapse: collapse; }
table, td { border: thin solid grey; }
td { padding: 0.25em; }