Ahora mismo tengo algo como
const route = '/Images/Banner/' const slides = [ { name: "banner-01", url: `${route}banner-01.png` }, { name: "banner-02", url: `${route}banner-02.png` }, { name: "banner-03", url: `${route}banner-03.png` }, ] ]En esto, estoy agregando manualmente cada imagen y sus propiedades porque solo hay 3 imágenes, pero quiero agregarlas dinámicamente en función de la cantidad de imágenes con el mismo nombre (siempre se llamarán banner-NN ).
¿Existe una manera eficiente de iterar a través de imágenes con el mismo patrón de nombre ('banner-') y colocarlas en una matriz de objetos?
Iterar sobre los índices de una colección y luego insertar los índices en las cadenas es bastante fácil...
const route = '/Images/Banner/' const slides = Array.from( { length: 3 }, // 1 to 3 (_, i) => { const numStr = String(i + 1).padStart(2, '0'); return { name: `banner-${numStr}`, url: `${route}banner-${numStr}`, }; } ); console.log(slides);La respuesta de @CertainPerformance está bien, pero se basa en Array. del cual no todos los navegadores son compatibles. Solo expongo mi forma de hacer esto
const route = "/Images/Banner/"; const slides = []; const totalItems = 100; for (let index = 0; index < totalItems; index++) { const banner = `banner-${index.toString().length > 1 ? index : `0${index}`}`; slides.push({ name: banner, url: `${route}${banner}.png`, }); } console.log(slides);