Перебор свойств объекта и вывод в таблицу

11 января 2021, 04:20

Прошу помощи. Как создать таблицу и заполнить значениями,а столбец address вывести city + street (т.е. город и улица в одной строке)? Есть некий json файл в котором данные подобного вида:

[
  {
    "id": "123",
    "name": "Smith",
    "address": {
      "city": "Tashkent",
      "street": "Lenina Street 3"
    }
]

Я делал следующим образом

<body>
<div id="table-list"></div>
<script>
fetch('someURL.json')
.then(function (response) {
return response.json()
})
.then(function (data) { 
createTable(data);
})
function createTable(array) {
        var testOne = array.length;
        var table = document.createElement('table');
        table.setAttribute('border', '1');
        table.setAttribute('color', '000');
        table.setAttribute('width','500');
        table.setAttribute('height', '300');
        var tbody = document.createElement('tbody');
        var tr = document.createElement('tr');
            tr.innerHTML = '<td>id</td><td>Name</td><td>Adress</td>';
            tbody.appendChild(tr);
        var items = ['id','name','address'],address = 'city';
        for(var i = 0; i < testOne; i++){
            var tr = document.createElement('tr');
                for (var j = 0; j < 3; j++) {
                    var td = document.createElement('td');
                    var item = array[i][items[j]];
                    //td.innerHTML =  item;
                    td.innerHTML = item[address] ? item[address] : item;
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
        }
        table.appendChild(tbody);
        document.getElementById('table-list').appendChild(table);
}
</script>
</body>

Однако данный подход кажется мне не правильным.

Правильней будет осуществить перебор свойств объекта в цикле и этом же цикле сделать создание таблицы.

Прошу прощения за кровь из глаз.Я лишь учусь.

Сначала мне казалось - сделаю хоть как нибудь, но сегодня прочитав пару тройку статей по объектам понял, что подход не верен.

(testOne[i].address.city + '' + testOne[i].address.street)

пробовал присваивать переменной данное выражение - не помогало.

Answer 1

Там, где заранее не известно точное количество элементов можно воспользоваться конструкцией for (property in Object) (Подробнее).

Например, для случая выше:

var json = [ 
  { 
    "id": "123", 
    "name": "John", 
    "address": { 
      "city": "Tashkent", 
      "street": "Lenina Street 3" 
    }}, 
    { 
    "id": "124", 
    "name": "Smith", 
    "address": { 
      "city": "Moscow", 
      "street": "Arbat str. 5" 
    } 
  } 
]; 
 
var tableContent = '<table>'; 
tableContent += '<tr><td>Name</td><td>Address</td></tr>'; 
 
for (p in json){ 
  tableContent += '<tr><td>' + json[p].name + '</td>'; 
  tableContent += '<td>' + json[p].address.city + " " + json[p].address.street + '</td></tr>'; 
} 
tableContent += '</table>'; 
 
document.getElementsByTagName('body')[0].innerHTML = tableContent;

table {  
  border: 1px solid #000;  
  border-spacing: 0; 
} 
td { 
  border: 1px solid #000; 
  padding: 2px; 
} 
tr:nth-child(1) { 
  background: #cce6ff; 
}

Формирование таблицы намеренно пропущу, т.к. в каждом конкретном случае это происходит по разному и решения тоже разные.

Я лишь учусь.

Всё хорошо. Все учимся. Главное - не сдавайтесь.

UPD: Пример с выводом всё же обновил, но это только как пример, а не рекомендация по использованию.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Остановка setInterval из прототипа [дубликат]

Есть конструкция в ходе которой у объекта есть переменная interval и через методы в прототипе этой переменной задаётся setInterval и при нажатии на кнопку...

107

javascript

По сочетанию клавиш вставить текст из div

Если сделать, как написано в коде, то это работает ровно один раз (после того, как текст уже оказался в textarea и нужно, скажем, удалить пару символов,...

127

javascript

Плавно анимировать появление элемента

Вроде бы при подобном коде всё должно изменяться плавно, но подобного, к сожалению, не происходит

javascript

Сделать обновление кнопки

При нажатии на кнопку фильтр выводится окно сайдбара, где можно выбрать параметры фильтров, задать и отфильтроватьНо при закрытии окна (когда...

103