Динамическое добавление блоков div в html страницу

Question

Раньше не приходилось сталкиваться с javascript, потому возникли трудности.

Имеется файл json с данными, которые генерируются в программе на сервере. json примерно такой -

[
  {
    "Id": 0,
    "Url": "http://192.168.0.103/pages/vechnye_watch.html",
    "Poster": "http://192.168.0.103/poster/0_poster.jpg",
    "Title": "Вечные",
    "Path": "F:\\Video\\Eternals.mkv"
  },
  {
    "Id": 1,
    "Url": "http://192.168.0.103/pages/ya_robot_watch.html",
    "Poster": "http://192.168.0.103/poster/1_poster.jpg",
    "Title": "Я Робот",
    "Path": "F:\\Video\\I.Robot.2004.1080p.BluRay.6xRus.Ukr.Eng.HDCUB-CtrlHD.mkv"
  },
  {
    "Id": 2,
    "Url": "http://192.168.0.103/pages/kosmicheskaya_odisseya_2001_watch.html",
    "Poster": "http://192.168.0.103/poster/2_poster.jpg",
    "Title": "Космическая одиссея 2001",
    "Path": "F:\\Video\\Space_odessy_2001.mkv"
  }
]```

Как прочитать этот json файл и вывести в блоки div на страницу html
в виде 

`
<div class="item" id="div0">
<a id="id0" href="http://192.168.0.103/pages/vechnye_watch.html" title="Вечные" style="box-shadow:0 0; ">
<img id="pic0" src="http://192.168.0.103/poster/0_poster.jpg" alt="Вечные">
<a id = "name0" href="http://192.168.0.103/pages/vechnye_watch.html" title="Вечные" class="item-name">Вечные</a>
</a>
</div>

<div class="item" id="div1">
<a id="id1" href="http://192.168.0.103/pages/ya_robot_watch.html" title="Я Робот" style="box-shadow:0 0; ">
<img id="pic1" src="http://192.168.0.103/poster/1_poster.jpg" alt="Я Робот">
<a id = "name1" href="http://192.168.0.103/pages/ya_robot_watch.html" title="Я Робот" class="item-name">Я Робот</a>
</a>
</div>

<div class="item" id="div2">
<a id="id2" href="http://192.168.0.103/pages/kosmicheskaya_odisseya_2001_watch.html" title="Космическая одиссея 2001" style="box-shadow:0 0; ">
<img id="pic2" src="http://192.168.0.103/poster/2_poster.jpg" alt="Космическая одиссея 2001">
<a id = "name2" href="http://192.168.0.103/pages/kosmicheskaya_odisseya_2001_watch.html" title="Космическая одиссея 2001" class="item-name">Космическая одиссея 2001</a>
</a>
</div>
`
в дальнейшем на выходе это будет виджет для Tizen TV
и чтобы в ручную не добавлять блоки, хочу динамически их создавать на странице

Answer 1

const data =
[
    {
      "Id": 0,
      "Url": "http://192.168.0.103/pages/vechnye_watch.html",
      "Poster": "http://192.168.0.103/poster/0_poster.jpg",
      "Title": "Вечные",
      "Path": "F:\\Video\\Eternals.mkv"
    },
    {
      "Id": 1,
      "Url": "http://192.168.0.103/pages/ya_robot_watch.html",
      "Poster": "http://192.168.0.103/poster/1_poster.jpg",
      "Title": "Я Робот",
      "Path": "F:\\Video\\I.Robot.2004.1080p.BluRay.6xRus.Ukr.Eng.HDCUB-CtrlHD.mkv"
    },
    {
      "Id": 2,
      "Url": "http://192.168.0.103/pages/kosmicheskaya_odisseya_2001_watch.html",
      "Poster": "http://192.168.0.103/poster/2_poster.jpg",
      "Title": "Космическая одиссея 2001",
      "Path": "F:\\Video\\Space_odessy_2001.mkv"
    }
];

data.forEach((item) =>
{
    let block = document.createElement('div');

    block.classList.add('item');
    block.id = 'div' +item.Id;
    block.innerHTML = `
        <a id="id${item.Id}" href="${item.Url}" title="${item.Title}" style="box-shadow:0 0;">
            <img id="pic${item.Id}" src="${item.Poster}" alt="${item.Title}">
            <a id="name${item.Id}" href="${item.Url}" title="${item.Title}" class="item-name">${item.Title}</a>
        </a>
    `;
    
    document.body.append(block);
});

БЛОГ НА HUSL

Динамическое добавление блоков div в html страницу

Ответы (1 шт):