Render · del array a la página

La función de render

import { crearTarjeta } from "./render.js";

export function pintarCatalogo(productos, contenedor) {
  if (productos.length === 0) {
    contenedor.replaceChildren(mensajeVacio());
    return;
  }

  const fragmento = document.createDocumentFragment();
  for (const producto of productos) {
    fragmento.append(crearTarjeta(producto));
  }
  contenedor.replaceChildren(fragmento);
}

Tiene tres propiedades que conviene nombrar, porque son las que la hacen fiable:

1. Recibe lo que pinta. No consulta variables globales ni pregunta a la página.
2. Deja el contenedor completo. No añade sobre lo que hubiera: lo sustituye.
3. Se puede llamar mil veces. El resultado depende solo de los datos que reciba.

Idempotente

Que ejecutarla dos veces con los mismos datos deje el mismo resultado. Sin esa propiedad, cada nuevo filtrado duplicaría el catálogo, que es el fallo con el que casi todo el mundo se estrena en esta sesión.

El estado vacío no es un detalle

Una lista vacía sin mensaje se percibe como un error de la aplicación. Tampoco basta con «No hay resultados»:

function mensajeVacio() {
  const parrafo = document.createElement("p");
  parrafo.className = "vacio";
  parrafo.textContent = "No hay productos que coincidan. Prueba a quitar algún filtro.";
  return parrafo;
}

Un buen estado vacío dice qué ha pasado y qué se puede hacer.

Borrar el HTML escrito a mano

Ahora el catálogo vive en los datos. En el HTML solo queda el contenedor:

<ul class="catalogo" data-js="catalogo"></ul>

Con una salvedad, que es la condición 2 de la unidad: si tu web debe seguir mostrando contenido sin JavaScript, el HTML conserva los productos y el código los sustituye al arrancar. Decide cuál de las dos opciones eliges, y escríbelo en tus notas.

Tarea 7 · El catálogo pintado

1. Escribe pintarCatalogo(productos, contenedor) en js/render.js.
2. Píntalo al arrancar desde main.js, importando los datos de la UD3.
3. Añade el estado vacío con un mensaje útil.
4. Llama a la función dos veces seguidas y comprueba que no se duplica.
5. Pinta un subconjunto usando una de tus funciones de filtrado de la UD3.
6. Muestra en un párrafo cuántos resultados se están viendo.

Ver respuestas

1 · Que llamarla varias veces con los mismos datos deja siempre el mismo resultado.

2 · Para poder pintar cualquier subconjunto y para poder probarla por separado.

3 · Qué ha ocurrido y qué puede hacer la persona a continuación.

---