0

Просьба, подсказать, как корректно перебрать подобную 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)
9
  • Извините, а какой ответ Вы ожидаете кроме как: "Надо написать программу для этого"? Что Вы пробовали сделать? Какие проблемы у Вас возникли?
    – Alex Yu
    Commented 15 сент. 2021 в 9:39
  • @AlexYu я пробовал перебрать следующем путем const tr = document.createElement('tr') for (const [title, content] of Object.entries(response)){ const thead = '<td>'+title+'</td>'; $(tr).append(thead) $('#thead').append(tr); for (key in content){ const td = '<td>'+content[key]+'</td>'; } }; в момент перебора content и вставке в таблицу данные встали не корректно, как <tr> <td>1</td>
    – xcplat
    Commented 15 сент. 2021 в 9:50
  • Пожалуйста, приведите ваши попытки в вопросе. Под вопросом есть кнопка Править. Commented 15 сент. 2021 в 10:34
  • Я вовсе не понимаю зачем вам в json'е такой сложный объект. Также я не вижу, куда делись: 0,3,4,5,6,7,8 . Мне кажется ваш json должен включать массивы. К примеру первая строка "ab":[1,2,3,4,5,6,7,8] . Возможно вы не знали, что в JSON присутствуют массивы которые более логичны для построения таблиц.
    – HTO HOT
    Commented 15 сент. 2021 в 10:36
  • @StepanKasyanenko привел одну из попыток, удалось корректно составить строку, но таблица заполняется только одной строкой
    – xcplat
    Commented 15 сент. 2021 в 12:18

1 ответ 1

3

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" },
};

// преобразование столбцов в строки, и извлечение заголовков
const tableData = { headers: Object.keys(response), rows: [] };
for (const header of tableData.headers) {
  Object.values(response[header]).forEach((val, idx) => {
    (tableData.rows[idx] = (tableData.rows[idx] ?? [])).push(val);
  });
}
// рендеринг таблицы
const tBody = document.createElement('table').createTBody();
tBody.insertAdjacentHTML('beforeBegin', `<thead><tr>${
  tableData.headers.map(hdr => `<th>${hdr}</th>`).join('')
}</tr></thead>`);
for (const row of tableData.rows) {
  const tr = tBody.insertRow();
  row.forEach(val => tr.insertCell().textContent = val);
}
document.body.appendChild(tBody.parentElement);
table  { border-collapse: collapse; }
th, td { min-width: 3ch; padding: 0.25em 0.5em; border: 1px solid #ccc; }

В литерале объекта response убрал дублирующееся свойство ac - потому что в результате имеет значение только самое последнее объявление свойства (предыдущие объявления с тем же именем свойства "игнорируются").


Если не нравится ES11+, то оператор ?? тут можно безболезненно заменить на ||. В остальном, используются возможности уже старенького ES6 (for..of, стрелочные функции, шаблонные строки).

Ваш ответ

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

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