Home > database >  How to append html id with for-loop?
How to append html id with for-loop?

Time:04-18

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>');
});
  • Related