Как отобразить таблицу с заранее не изсвестным количеством столбцов и строк?

Question

По простому запросу get я получаю json. Из этого я собираю таблицу использую bootsrap. Проблема в том, что размер таблицы MxN приходит разный. Не знаю как подступить к решению задачи. Не зная какие ключи будут и в каком количестве.

Подскажите пожалуйста пример или направление действий.

На пример пришел сначала такой JSON

        let arr =  [
            {
                'id': 0,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            }
        ]

Потом пришел такой

    let arr =  [
        {
            'id': 0,
            'iq': 0,
        },
        {
            'id': 1,
            'iq': 0,
        },
        {
            'id': 0,
            'iq': 0,
        }
    ]

Answer 1

Как-то так на скорую руку.

returnData();

function createTable(data) {
    let table = document.createElement('table');

    for( var i = 0; i < data.length; i++ ) {
        var child = data[i];
        if(i === 0 ) {
           addHeaders(table, Object.keys(child));
        }
        var row = table.insertRow();
        Object.keys(child).forEach(function(k) {
        var cell = row.insertCell();
        cell.appendChild(document.createTextNode(child[k]));
    })    
   }
   
   function addHeaders(table, keys) {
      let row = table.insertRow();
      for(let i = 0; i < keys.length; i++ ) {
         let cell = row.insertCell();
         cell.appendChild(document.createTextNode(keys[i]));
      }
   }
   return table
}

function returnData() {
  document.getElementById('tableContainer').innerHTML = '';
  let arr =  [
            {
                'id': 0,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 0,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 0,
                'id1': 1,
                'id2': 0,
            },
            {
                'id': 1,
                'id1': 1,
                'id2': 0,
            }
        ];
  document.getElementById('tableContainer').appendChild(createTable(arr));
}

function updateData() {
  document.getElementById('tableContainer').innerHTML = '';
  let arr =  [
        {
            'id': 0,
            'iq': 0,
        },
        {
            'id': 1,
            'iq': 0,
        },
        {
            'id': 0,
            'iq': 0,
        }
    ];
  document.getElementById('tableContainer').appendChild(createTable(arr));
}

<div id="tableContainer"></div>


<button onclick='return returnData()'>Return</button>
<button onclick='return updateData()'>Update</button>

БЛОГ НА HUSL

Как отобразить таблицу с заранее не изсвестным количеством столбцов и строк?

Ответы (1 шт):