I'm new to JavaScript and HTML. I'm reading my JSON file and appending it to each HTML ID but was wondering if there's an easier way to do this by using a for-loop?
$("#vid0")
.append(`<video src="${info.data[0].assets[3].url}" poster="${info.data[0].thumbnails[2].url}" muted>
</video>
<h3 class="title">${info.data[0].metadata.title}</h3><h4 hidden class="description">${info.data[0].metadata.description}</h4>`);
$("#vid1")
.append(`<video src="${info.data[1].assets[3].url}" poster="${info.data[1].thumbnails[2].url}" muted>
</video>
<h3 class="title">${info.data[1].metadata.title}</h3><h4 hidden class="description">${info.data[1].metadata.description}</h4>`);
$("#vid2")
.append(`<video src="${info.data[2].assets[3].url}" poster="${info.data[2].thumbnails[2].url}" muted>
</video>
<h3 class="title">${info.data[2].metadata.title}</h3><h4 hidden class="description">${info.data[2].metadata.description}</h4>`);
$("#vid3")
.append(`<video src="${info.data[3].assets[3].url}" poster="${info.data[3].thumbnails[2].url}" muted>
</video>
<h3 class="title">${info.data[3].metadata.title}</h3><h4 hidden class="description">${info.data[3].metadata.description}</h4>`);
$("#vid4")
.append(`<video src="${info.data[4].assets[3].url}" poster="${info.data[4].thumbnails[2].url}" muted>
</video>
<h3 class="title">${info.data[4].metadata.title}</h3><h4 hidden class="description">${info.data[4].metadata.description}</h4>`);
Iterating over the changing indicies of 0 to 4 would look to do the trick.
for (let i = 0; i < 5; i++) {
$(`#vid${i}`)
.append(`
<video src="${info.data[i].assets[3].url}" poster="${info.data[1].thumbnails[2].url}" muted>
</video>
<h3 class="title">${info.data[i].metadata.title}</h3><h4 hidden class="description">${info.data[i].metadata.description}</h4>
`);
}
If info.data will have the same number of items in the array as there are vid elements, a more elegant approach would be to give all such vid elements a class in common (such as vid), and then do
info.data.forEach((videoData, i) => {
$('.vid').eq(i)
.append(`
<video src="${videoData.assets[3].url}" poster="${videoData.thumbnails[2].url}" muted>
</video>
<h3 class="title">${videoData.metadata.title}</h3><h4 hidden class="description">${videoData.metadata.description}</h4>
`);
});
you can use this loop, i assume data is coming from an ajax call, and you got the payload inside the info variable.
$.each(info.data, function(i, vid){
$("#vid" + i).append('<video src="${info.data[i].assets[3].url}" poster="${info.data[i].thumbnails[2].url}" muted></video>
<h3 class="title">${info.data[i].metadata.title}</h3><h4 hidden class="description">${info.data[i].metadata.description}</h4>');
});