Estoy trabajando con un proyecto sanity.io. Obtengo algunos datos, los almaceno en una matriz y luego los envío a mi front-end con express y ejs.
Cada post que se almacena en mi matriz se mostrará como una tarjeta. Cada tarjeta tendrá una clase CSS diferente para mostrarse como una tarjeta pequeña, una tarjeta mediana, una tarjeta grande o una tarjeta XL.
Entonces, mi objetivo es recorrer la matriz y adjuntar una propiedad a cada objeto para acceder en el extremo frontal para determinar qué tamaño tendrá la tarjeta.
Esencialmente se vería así, pero esto obviamente no escalaría ya que estaré subiendo nuevas publicaciones al sitio web a través de sanity.io
// desired result posts[0].size = 's' posts[1].size = 'm' posts[2].size = 'l' posts[3].size = 'xl' posts[4].size = 's' posts[5].size = 'm' posts[6].size = 'l' posts[7].size = 'xl'Entonces, estoy pensando que tengo que recorrer la matriz, adjuntar las propiedades a los primeros 4 objetos y luego reiniciar la secuencia para los siguientes 4 objetos, luego los siguientes 4, etc.
let items = []; // fetch and push to array client.fetch(query).then((posts) => { posts.forEach((post) => { items.push(post); }); // set properties on first 4 objects, restart sequence on 5th, 9th etc. for(let i = 0; i < posts.length; i+=4){ posts[i].size = 's' posts[i].size = 'm' posts[i].size = 'l' posts[i].size = 'xl' } });Ese último bloque de código está muy mal, pero es justo el punto en el que estoy ahora. Realmente agradecería cualquier ayuda o sugerencias sobre esto.
Crea una matriz de tamaños. Asigne las posts y, para cada publicación, use la distribución de objetos para crear un nuevo objeto, con el size . Tome el valor de size de la matriz. Para obtener el tamaño relevante para la publicación, use el resto del index de la publicación actual ( % ) de la length de la matriz de sizes .
Nota: está utilizando una búsqueda asíncrona, use promesas o espera asíncrona para crear los items en lugar de enviarlos directamente.
const sizes = ['s', 'm', 'l', 'xl']; const items = await client.fetch(query).then(posts => posts.map((post, index) => ({ ...post, size: sizes[index % sizes.length] })) );Ejemplo:
const fetch = () => Promise.resolve([{ title: 'a' }, { title: 'b' }, { title: 'c' }, { title: 'd' }, { title: 'e' }, { title: 'f' }]); const sizes = ['s', 'm', 'l', 'xl']; const example = async () => { const items = await fetch().then(posts => posts.map((post, index) => ({ ...post, size: sizes[index % sizes.length] })) ); console.log(items); } example();esto debería ser trabajo.
// set properties on first 4 objects, restart sequence on 5th, 9th etc. const postProp = ['s','m','l','xl']; for(let a = 0; a < posts.length; a++){ for(let b of postProp){ posts[a].size = postProp[b]; a += 1; } }