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

Question

[eridanlivia]

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

<i class="fa fa-user-circle" aria-hidden="true"></i> Ferdinand Carney
<i class="fa fa-envelope" aria-hidden="true"></i> [e-mail]

[
    {
        "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"
    }
]

Answer 1

[sewaca]

const data = [ /* Array with JSON data */ ];
document.body.innerHTML = data.map((item)=>`
  <i class="fa fa-user-circle" aria-hidden="true"></i> ${item.name} 
  <i class="fa fa-envelope" aria-hidden="true"></i> ${item.email}
  `)
  .join(" ");

В data пишите свой массив
Если надо менять не весь контент на странице, а только в каком-то месте, то вместо document.body пишите селектор на этот элемент

Comments

[eridanlivia]

Это помогло!!! А сам json через fetch можно подключить?

[Михаил Р.]

eridanlivia, можно

[sewaca]

eridanlivia, можно конечно
Просто пропишите этот код после стандартной обработки фетча
Что-то вроде

fetch("https://server.com")
    .then(res=>res.json())
    .then(data=>{
    document.body.innerHTML = data.map((item)=>`
      <i class="fa fa-user-circle" aria-hidden="true"></i> ${item.name} 
      <i class="fa fa-envelope" aria-hidden="true"></i> ${item.email}
      `).join(" ");
    })