Soy nuevo en JavaScript y HTML. Estoy leyendo mi archivo JSON y agregándolo a cada ID de HTML, pero me preguntaba si hay una manera más fácil de hacerlo usando un bucle for.
$("#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>`);Iterar sobre los índices cambiantes de 0 a 4 parecería funcionar.
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> `); } Si info.data tendrá la misma cantidad de elementos en la matriz que elementos vid, un enfoque más elegante sería dar a todos esos elementos vid una clase en común (como vid ), y luego hacer
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> `); });puede usar este ciclo, supongo que los datos provienen de una llamada ajax y obtuvo la carga útil dentro de la variable de información.
$.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>'); });