0

По простому запросу 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,
        }
    ] 
1
  • А почему нельзя сделать разные таблицы? Для одной - можно перебрать уже существующие столбики и или добавить недостающие пустые клетки в прилетевшем JSON, или дополнить существующую таблицу недостающими клетками. Надо знать, о каком количестве разных клеток идет речь. Если их 15, такой вариант прокатит, если 100 - надо бы еще знать, о чем конкретная задача) 1 окт 2020 в 5:40

1 ответ 1

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>

1
  • Спасибо за пример, помогло разобраться
    – Dip
    3 окт 2020 в 16:12

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.