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? Answer Iterating over the changing indicies of 0 to 4 would look to do the trick. If info.data will have the same number of items in the

How to append html id with for-loop?

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>`);

Answer

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>
        `);
});

Advertisement

Answer