Как вывести JSON таблицей не зная его содержимого и ключей?

Question

[Виталий Питаленко]

При запросе к БД php файл возвращает ответ в виде JSON массива.
Так как запросы к БД могут быть разными я не знаю какие ключи будут в JSON

Можно ли как-то вывести JSON таблицей не зная его содержимого (ключей, кол-ва столбцов и строк)?

Answer 1

[Виталий Питаленко]

Сделал так

function print_request (json) {
  var array_key = [];
  $.each( json , function( key, val ){
    array_key = [];
    $.each( val , function( key, val ){
      array_key.push(key);
    });
  });
  var table_sql = '';
  $('#table_sql').text('');
  table_sql += '<table class="striped"><thead><tr>';
  for(var i=0; i <array_key.length; i++) {
    table_sql += '<th>'+array_key[i]+'</th>';
  }
  table_sql += '</tr></thead><tbody>';
  $.each( json , function( key, val ){
    table_sql += '<tr>';
    $.each( val , function( key, val ){
      table_sql += '<td>'+val+'</td>';
    });
    table_sql += '</tr>';
  });
  table_sql += '</tbody></table>';
  $('#table_sql').append(table_sql);
}

Answer 2

[Петр Мухуров]

На React было бы что-то в таком духе:

const MyTr = ({row}) => (
  <tr>
    {row.map((v, k) => <td key={k}>{v}</td>)}
  </tr>
);

class MyTable extends Component {
  render() {
    const { data } = this.props;

    return (
      <Table>
        {data.map((v, k) => <MyTr data={v} key={k}) />
      </Table>
    )
  }
}

Перенести на ванильку, думаю, проблем не составит, чуть больше кода получится

Comments

[Виталий Питаленко]

Я немного лох в React пока не дошел до его изучения)))

[Петр Мухуров]

Дело не в том, что я привел пример на React) Просто как пример, сам принцип: получили массив данных (кстати, если нет гарантии, что это будет массив массивов, то лучше юзать _.map), и двойным циклом прогнались по нему: в теле первого цикла будет создавать элемент <tr>, а в теле второго - элемент <td>, получается абстрактная реализация вывода данных в виде таблицы)

[Петр Мухуров]

в грубом приближении будет что-то вроде

let myTable = ['<table>'];
_.forEach(data, (v, k) => {
  myTable.push('<tr>');
  _.forEach(v, (vv, kk) => {
    myTable.push('<td>', vv, '</td>');
  });
  myTable.push('</tr>');
});

myTable.push('</table>');
document.body.innerHTML = myTable.join('');