Json-файл. И него взять элементы из объектов и стилизовать, как сделать?

Question

[eridanlivia]

Здравствуйте. У меня есть json-файл с массивом. Какое изменеие нужно применть в js, чтобы каждая строка в div могла редактироваться css? Допустим, Я хочу перед номером телефона поставить иконку трубки и перед email иконку конверта. Прошу прощения за корявость вопроса.

[
	{
		"name": "Ferdinand Carney",
		"phone": "[phone]",
		"email": "[e-mail]",
		"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": "[e-mail]",
		"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"
	}
]

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++;
            });
        });

Answer 1

[Mors Clamor]

document.body.innerHTML += '<div class="textcols-item" id="'+j+'"></div>';

Редактировать выводимую вёрстку, в вашем случае innerHTML

Comments

[eridanlivia]

Она редактируется, но мне, допустим, нужно сделать так:

<i class="fa fa-address-book" aria-hidden="true"></i>
[phone]
<br>
<i class="fa fa-envelope" aria-hidden="true"></i>
[e-mail]

[Mors Clamor]

eridanlivia, вариант 1 - попроще
Многострочный текст

Вариант 2 - сделать простенький шаблонизатор и хранить верстку отдельно