2

Tengo una lista de noticias, inicialmente vienen desde la API las primeras 10. Luego, si apreto en el botón "cargar mas" aparecen las 10 siguientes, y asi sucesivamente.

Yo quiero armar un bloque html que respete una estructura algo asi: (que se repita cada 10 noticias, y en la ultima carga que muestre los que haya, que generalmente serán menos de 10)

Al inicio, se cargó la primer página

<div class="row">
 {{ noticia 1 }}
 {{ noticia 2 }}
</div>
<div class="row">
 {{ noticia 3 }}
 {{ noticia 4 }}
</div>
<div class="row">
 {{ noticia 5 }}
 {{ noticia 6 }}
 {{ noticia 7 }}
</div>
<div class="row">
 {{ noticia 8 }}
 {{ noticia 9 }}
 {{ noticia 10 }}
</div>

Clickeo en cargar más

<div class="row">
 {{ noticia 1 }}
 {{ noticia 2 }}
</div>
<div class="row">
 {{ noticia 3 }}
 {{ noticia 4 }}
</div>
<div class="row">
 {{ noticia 5 }}
 {{ noticia 6 }}
 {{ noticia 7 }}
</div>
<div class="row">
 {{ noticia 8 }}
 {{ noticia 9 }}
 {{ noticia 10 }}
</div>

<div class="row">
 {{ noticia 11 }}
 {{ noticia 12 }}
</div>
<div class="row">
 {{ noticia 13 }}
 {{ noticia 14 }}
</div>
<div class="row">
 {{ noticia 15 }}
 {{ noticia 16 }}
 {{ noticia 17 }}
</div>
<div class="row">
 {{ noticia 18 }}
 {{ noticia 19 }}
 {{ noticia 20 }}
</div>

Perdón por el código tan repetitivo, queria ser claro. No sé como armar esta estructura dentro de un v-for

7
  • Por favor, presiona editar y agrega el código que ya tienes
    – Marcos
    Commented el 22 abr. 2022 a las 22:50
  • No tengo nada, quiero en un div hacer v-for="item,index in noticias" y segmentar los bloques con 10 items cada uno. No tengo idea como encararlo.
    – Agustin G.
    Commented el 22 abr. 2022 a las 22:56
  • Entonces mi consejo es, primero intentalo. Si no te sale, actualiza la pregunta con el código que hace algo, pero no lo que necesitas.
    – Marcos
    Commented el 22 abr. 2022 a las 23:01
  • 1
    Te tíro una idea, al recibir las noticias, podrías crear un arreglo con los grupos. ej: [[1,2], [3,4], [5,6,7], [8,9,10]]. Despues es tan simple como hacer 2 v-for, el primero para recorrer los "grupos" y el segundo para las "noticias en el grupo"
    – Marcos
    Commented el 22 abr. 2022 a las 23:08
  • 1
    @Marcos exactamente. Leí este comentario tras elaborar mi respuesta, pero viene a ser algo como lo que indicas. Más que tirar una idea, le has tirado una respuesta completamente válida desde mi punto de vista. Le he dejado más detalles concretos, pero para mí tu comentario es más que suficiente. Un saludo.
    – UXK
    Commented el 23 abr. 2022 a las 17:45

1 respuesta 1

1

Data chunking / Data splitting

Lo que buscas es lo que normalmente llamamos "chunking", fraccionar un conjunto de datos en conjuntos más pequeños (chunks). También hay quienes le llaman split o splitting.

Primero, si noticias fuera un array como

[
   "noticia 1", 
   "noticia 2", 
   "noticia 3", 
   "noticia 4", 
   "noticia 5", 
   ...
]

Conviértelo a un array de arrays, estilo.

[
  ["noticia 1", "noticia 2"],
  ["noticia 3", "noticia 4"],
  ["noticia 5"]
]

Si cargar más realiza alguna petición a alguna API o lo que sea que te de otro array normal, simplemente divide los datos adicionales a su vez en chunks y agrégalos, teniendo en cuenta que el último chunk puede tener todavía un hueco libre.

Cómo partir arrays en subcojuntos (chunks) regulares

Te dejo una función sencillita

function chunk(array, size) {
  const chunks = []
  for(let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i+size))
  }
  return chunks
}

Para convertir tus noticias a chunks (omitiendo temas de tipado, no sé si usas TypeScript)

noticias = chunk(noticias, 2)

Si de casualidad utilizas alguna librería para tratamiendo de datos como lodash, estas suelen traer ya este función, o alguna similar.

Con conjuntos irregulares hace falta un poco más

Si quieres tener chunks de 2 y 3 de forma controlada, tendrás que hacerte un algoritmo custom. Puedes partir del sugerido y añadirle alguna modificación. Por ejemplo, en lugar de un size fijo, podrías tener un conjunto de size que aplicarse en orden (y cíclicamente)

Función ejemplo para partir en 2, 2, 3 y 3

function variableChunks(array, sizes) {
    const chunks = []
    let sizeIndex = 0
    let i = 0;
    while(i < array.length) {
        chunks.push(array.slice(i, i+sizes[sizeIndex]))
        i += sizes[sizeIndex]
        sizeIndex = (sizeIndex + 1) % sizes.length
    }
    
    return chunks
}

const noticias = ["n1", "n2", "n3", "n4", "n5", "n6", "n7", "n8", "n9", "n10", "n11", "n12", "n13", "n14"]

console.log(variableChunks(noticias, [2,2,3,3]))

NOTA: te lo dejo con while porque es más fácil de ver la actualización de variables en cada vuelta. A tu gusto.

Como ves es cíclico según el array de sizes pasado. Los dos primeros chunks tendrán tamaño 2, los dos siguientes tamaño 3, los dos siguientes volverán a tamaño 2, etc...

Renderizado de los chunks en Vue

Veo que le estás dando una definición espacial a los chunks, y los entiendes como filas (rows), algo habitual y completamente correcto. Podrías recorrer el array de filas con un for, y con un for interno recorrer cada una de las noticias del chunk.

<div class="row"  v-for="row in noticias">
    <div class="noticia" v-for="noticia in row">
        {{noticia}}
    </div>
</div>

NOTA: usando div porque no sé qué semántica estás usando. Típicamente para una noticia se puede utilizar <article>. Si no quieres ninguna etiqueta (ni div, ni article, solo el texto plano como sugieres) puedes usar la etiqueta <template> que no aparecerá en el resultado final.

NOTA 2: dependiendo tu versión de Vue y de la forma de tus datos, su orden y frecuencia de actualización, puede ser conveniente usar la directiva :key en v-for.

IMPORTANTE Consejo adicional: considera solo CSS

En algunas ocasiones, para mostrar murales de noticias con distintos tamaños y disposiciones, no es siquiera necesario modificar la estructura de los datos en el html (DOM) ni en los datos lógicos, y es una cuestión de representación con CSS. Si realmente no necesitas estructurar los datos y solo buscas un layout, quizás te interese simplemente tener todas las noticias seguidas y modificar su disposición con CSS. display: grid es muy útil para ello, pero también puede hacerse de maneras tradicionales con el pseudoselector nth-of-type o nth-child.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.