toyboy__37,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div id="container"></div>
<script>
const dataObject = {
"step4" : [
{"url": "/wp-content/uploads/2021/05/communications1_min.jpg", "header": "Электрика", "list": ["Устройство электропроводки", "Электрошкаф", "Монтаж розеток и выключателей"]},
{"url": "/wp-content/uploads/2021/05/communications2_min.jpg", "header": "Водоснабжение", "list": ["Разводка армированных труб для горячего и холодного водоснабжения", "Опрессовка системы для герметичности"]},
{"url": "/wp-content/uploads/2021/05/communications3_min.jpg", "header": "Отопление", "list": ["Разводка армированных труб", "Опрессовка системы для герметичности"]},
{"url": "/wp-content/uploads/2021/05/communications4_min.jpg", "header": "Канализация", "list": ["Разводка ПВХ труб внутренней канализации"]},
{"url": "/wp-content/uploads/2021/05/communications5_min.jpg", "header": "Газовая котельная", "list": ["Настенный газовый котел", "Трубовпровод коаксильный", "Заправка теплоносителем", "Опрессовка системы"]},
{"url": "/wp-content/uploads/2021/05/communications6_min.jpg", "header": "Электрокотельная", "list": ["Настенный электрический котел", "Бойлер косвенного нагрева", "Мембранный бак для водоснабжения", "Трехходовой смеситель", "Опрессовка системы"]}
]
}
dataObject.step4.forEach(({url, header, list})=>{
list = list.map(txt => `<li>${txt}</li>`).join("");
const html = `
<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
data-src="${url}"
src="${url}">
<strong>${header}</strong>
<ul>
${list}
</ul>`
container.insertAdjacentHTML('afterbegin', html)
})
</script>
</body>
</html>
