Если вы уже обработали биты выборки, то это часть рендеринга. И если вы еще не обработали извлекаемые биты, то может помочь вам с этим . Современные браузеры реализуют очень мощный интерфейс выборки, где вы можете использовать
fetch('http://example.com/movies.json')
.then(function(response) {
// here, we take the response from the fetch request, and convert it to a JSON
// object, and pass that to the NEXT step.
return response.json();
})
.then(function(myData) {
// taking that JSON object, we can do something with it.
// In our particular case, we want to take that JSON, and turn it into a
// bunch of DOM nodes.
console.log(JSON.stringify(myData));
});
Но в вашем случае, вместо простого console.log () на последнем этапе, вы захотите сделать что-то немного другое. Вы хотите перебрать каждый узел в массиве и превратить его в фактический узел HTML.
Итак, первым шагом было бы сделать что-то для каждого члена этого массива:
myData.forEach(function(item){ ...});
Это позволяет нам что-то делать с каждым объектом в массиве. Поскольку они являются объектами, мы можем легко создать из них HTML-элемент, используя Шаблонные литералы . Это строка с переменными JavaScript, которые вставляются на лету. Что-то вроде:
myData.forEach(function(item){
let myContainer = `<div class='album'>
<h2>${item.Artist} : ${item.Title}</h2>
<p class='formats'>${item.Format}</p>
<figure>
<img src=''>
<figcaption>${item.Title}</figcaption>
</figure>
</div>`;
});
Пока все работает хорошо, но чего-то не хватает. Мы создали узел HTML DOM в виде строки, но нам все еще нужно вставить его в элемент контейнера. Для удобства представим, что у нас есть контейнер с классом main-container
:
myData.forEach(function(item){
// this builds the HTML DOM node for our current item
let myContainer = `<div class='album'>
<h2>${item.Artist} : ${item.Title}</h2>
<p class='formats'>${item.Format}</p>
<figure>
<img src=''>
<figcaption>${item.Title}</figcaption>
</figure>
</div>`;
// This line appends the string we just built into the DOM.
document.querySelector(".main-container").innerHTML += myContainer;
});
Теперь не хватает только двух вещей: CSS для стилизации всего этого (лучший способ? Стилизация .album
и стилизация любого из его дочерних узлов) и откуда поступают изображения?