Стилизация json на странице html. Как сделать?

Question

Стилизация json на странице html. Как сделать?

Рейтинг: 0Ответов: 1Опубликовано: 02.08.2023

Снова Я со своим json. Есть json файл и есть html, куда нужно вывести данные первого. Мне нужно, чтобы на станицу выводилась информация в виде:

<i class="fa fa-user-circle" aria-hidden="true"></i> Ferdinand Carney
<i class="fa fa-envelope" aria-hidden="true"></i> in@aol.net

Мой код:

fetch("users.json")
    .then(res => {return res.json();})
    .then((data) => {
        let j = 0;
        Object.keys(data).forEach(i => {
            document.body.innerHTML += '<div class="textcols-item" id="'+j+'"></div>';
            for (const [key, value] of Object.entries(data[j])) {
                document.getElementById(''+j).innerHTML += '<p id="'+ key +'">'+ value + '</p>';
            }
            j++;
        });
    });

Получаемые данные

[
    {
        "name": "Ferdinand Carney",
        "phone": "(640) 447-3254",
        "email": "in@aol.net",
        "address": "563-4648 Curabitur Street",
        "position_name": "Mauris eu turpis. Nulla aliquet. Proin velit. Sed malesuada augue",
        "department": "nisi magna sed dui. Fusce aliquam, enim nec tempus scelerisque,",
        "hire_date": "Dec 24, 2020"
    },
    {
        "name": "Deborah Gonzales",
        "phone": "1-258-431-9358",
        "email": "hendrerit@icloud.net",
        "address": "705 Pede Avenue",
        "position_name": "dui nec urna suscipit nonummy. Fusce fermentum fermentum arcu. Vestibulum",
        "department": "Phasellus dapibus quam quis diam. Pellentesque habitant morbi tristique senectus",
        "hire_date": "Oct 25, 2020"
    }
]

javascript json

Источник: Stack Overflow на русском

Answer 1

▲ 1

let data = [
    { "name": "Ferdinand Carney", "email": "in@aol.net" },
    { "name": "Deborah Gonzales", "email": "hendrerit@icloud.net" }
];
 
 
let html = '';
 
for (let item of data) {
    html += `
      <i class="fa fa-user-circle" aria-hidden="true"></i> ${item.name}
      <i class="fa fa-envelope" aria-hidden="true"></i> ${item.email}
      
      <br>
    `;
}

document.body.innerHTML = html

Стилизация json на странице html. Как сделать?

Ответы