How to append html id with for-loop?-CodePudding

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 >${info.data[0].metadata.title}</h3><h4 hidden >${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 >${info.data[1].metadata.title}</h3><h4 hidden >${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 >${info.data[2].metadata.title}</h3><h4 hidden >${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 >${info.data[3].metadata.title}</h3><h4 hidden >${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 >${info.data[4].metadata.title}</h3><h4 hidden >${info.data[4].metadata.description}</h4>`);

CodePudding user response：

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 >${info.data[i].metadata.title}</h3><h4 hidden >${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 >${videoData.metadata.title}</h3><h4 hidden >${videoData.metadata.description}</h4>
        `);
});

CodePudding user response：

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 >${info.data[i].metadata.title}</h3><h4 hidden >${info.data[i].metadata.description}</h4>');
});