Exportar CSV desde el navegador con map

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:53

Exportar CSV desde el navegador con map

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 4 de 24

Clase 4 / 24

Comentarios (3)3 comentarios

Daniel Munraz

Hace 7 meses

posiblemente existan formas mas bonitas de resolver el mini reto, pero asi lo hice yo, identificando cuando es la primera row y agregandolo ahi

function exportHabitsToCVS(){
    const habits = habitService.listHabits();
    const rows = habits.map((habit) => {
      return {
        name: habit.name,
        frequency: habit.frequency,
        count: habit.getLogs().length,
      }
    }).map((row, index) => {
      if(index === 0){
        return `HABITO,FRECUENCIA,CONTEO\n${row.name},${row.frequency},${row.count}`;
      }
      return `${row.name},${row.frequency},${row.count}`;
    })
    .join('\n');
    const blob = new Blob([rows], { type: 'text/csv'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'habits.csv';
    a.click();
  }

Harvin Andres Zapata Vidal

Hace 3 meses

Comparto mi forma de resolver el reto.

  function exportHabitsToCsv() {
    const habits = habitService.listHabits();
    const rows = habits.map((habit) => {
      return {
        name: habit.name,
        frequency: habit.frequency,
        count: habit.getLogs().length, 
      }
    })
    .map(row => `${row.name},${row.frequency},${row.count}`)
    rows.unshift('Nombre,Frecuencia,Check-ins'); //unshift agrega un elemento al inicio del array, en este caso el encabezado del CSV
    const blob = new Blob([rows.join('\n')], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'habits.csv';
    a.click();
  }

Armando Salamanca Ayon

Hace 5 meses

Esta fue mi solución al reto

function exportHabitToCSV() {
  const habits = habitService.listHabits();
  const rows = habits
    .map((habit) => ({
      name: habit.name,
      frequency: habit.frequency,
      count: habit.getLogs().length,
    }))
    .map((row, idx) => {
      const header =
        idx === 0
          ? `Name,Frequency,Count\n${row.name},${row.frequency},${row.count}`
          : "";
      const body = `${row.name},${row.frequency},${row.count}`;
      return header || body;
    })
    .join("\n");

  const blob = new Blob([rows], { type: "text/csv" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "habits.csv";
  a.click();
}

Recursos

¿Te ha tocado esa tarea clásica en el trabajo de exportar datos a un archivo CSV directamente desde el navegador? Con JavaScript puro y el método map puedes construir un reporte descargable en pocas líneas, sin backend ni librerías externas. Aquí verás cómo transformar una lista de hábitos en un archivo CSV listo para abrir en Excel o Google Drive.

¿Cómo preparar el botón de exportar en el HTML?

Antes de escribir la lógica, necesitas un punto de entrada visual. La idea es agregar un botón junto a los controles que ya tenías, por ejemplo al lado de Registrar.

En el HTML se agrega un botón con el texto Exportar y un identificador claro como exportHabits. Ese id será el que uses después para engancharle el listener desde JavaScript [1:00].

¿Dónde debo colocar el botón de exportar? Junto a los botones existentes de tu interfaz, con un id único que puedas seleccionar desde JavaScript. Lo demás lo maneja el listener.

Una vez recargues con Hard Reload (clic secundario sobre el botón de refresh del navegador), el botón aparece disponible para engancharle la lógica.

¿Cómo transformar los datos con map antes de exportar?

Aquí es donde el método map brilla como herramienta de pipeline. La idea es tomar la lista original de hábitos, que viene como instancias de una clase, y convertirla en objetos planos con solo los campos que quieres exportar.

Desde setupModelListeners se agrega un listener al botón que dispara la función exportToCSV. Dentro de esa función, el primer paso es acceder a la lista de hábitos y aplicar map [3:30].

La primera transformación crea un objeto nuevo por cada hábito con tres atributos:

El nombre del hábito.
La frecuencia con la que se realiza.
La cantidad de registros, calculada con el método getLogs().length.

Ese getLogs es un método que ya vive dentro de la clase gracias a la programación orientada a objetos, y devuelve cuántas veces se ha marcado el hábito. Con esto pasas de una clase compleja a un objeto plano fácil de serializar.

¿Puedo encadenar varios map en el mismo pipeline?

Sí, y muchas veces conviene por legibilidad. En el ejercicio se encadena un segundo map que toma cada objeto plano y lo convierte en una fila de texto separada por comas, que es el formato natural de un CSV.

Puedes tener dos, cuatro o cinco maps unidos sin problema. Puede haber un costo en rendimiento si trabajas con listas gigantes, pero si tu código gana claridad, vale la pena. Ese es el espíritu de un pipeline de datos: pequeñas transformaciones encadenadas.

¿Cómo generar el archivo CSV descargable con Blob?

Con los datos ya transformados en filas, falta unirlas y empaquetarlas como archivo. Aquí entran tres piezas: join, Blob y una etiqueta ancla temporal en el DOM [7:40].

Primero aplicas un join('\n') sobre el array de filas para que cada hábito quede en una línea nueva. Ese join también forma parte del pipeline y es un método disponible tanto en arrays como en strings.

¿Qué es un Blob en JavaScript? Es un objeto que representa datos binarios o de texto listos para tratarse como archivo dentro del navegador. Sirve para CSV, TXT e incluso PDF.

El Blob se crea pasándole el contenido y el tipo de archivo, en este caso text/csv. Aquí hay un detalle clave que rompe el código si lo ignoras: el primer argumento del constructor Blob debe ser un array, no un string suelto. Si le mandas el string directo, el navegador lanza un error de forma incorrecta [10:15].

¿Cómo forzar la descarga automática del archivo?

Una vez tienes el Blob, generas una URL temporal con URL.createObjectURL. Luego creas dinámicamente una etiqueta <a>, le asignas esa URL en el atributo href, le pones un nombre de archivo como habits.csv en el atributo download y disparas un click programático.

Ese clic simulado le dice al navegador que descargue el archivo como si el usuario hubiera hecho clic en un enlace real. Es un truco elegante que evita depender de backends o librerías pesadas.

¿Qué obtienes al final y cómo mejorar el reporte?

Al abrir el archivo descargado en Google Drive, Excel o incluso en Visual Studio Code, verás tres columnas: nombre del hábito, frecuencia y número de veces registrado. Es un archivo de texto plano, pero cualquier visualizador de CSV lo interpreta como tabla.

Lo interesante es notar que el mismo método map que usas para renderizar en pantalla es el que aquí genera el reporte. Cambia el destino, no la herramienta. Esa es la potencia de pensar en transformaciones de datos en lugar de bucles manuales.

Como reto, agrega una fila de headers al inicio del CSV con los nombres de las columnas. Es una mejora simple que profesionaliza el reporte y lo deja listo para compartir. ¿Cómo lo resolverías tú? Cuéntame en los comentarios qué otras columnas agregarías.

function exportHabitsToCVS(){
    const habits = habitService.listHabits();
    const rows = habits.map((habit) => {
      return {
        name: habit.name,
        frequency: habit.frequency,
        count: habit.getLogs().length,
      }
    }).map((row, index) => {
      if(index === 0){
        return `HABITO,FRECUENCIA,CONTEO\n${row.name},${row.frequency},${row.count}`;
      }
      return `${row.name},${row.frequency},${row.count}`;
    })
    .join('\n');
    const blob = new Blob([rows], { type: 'text/csv'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'habits.csv';
    a.click();
  }

  function exportHabitsToCsv() {
    const habits = habitService.listHabits();
    const rows = habits.map((habit) => {
      return {
        name: habit.name,
        frequency: habit.frequency,
        count: habit.getLogs().length, 
      }
    })
    .map(row => `${row.name},${row.frequency},${row.count}`)
    rows.unshift('Nombre,Frecuencia,Check-ins'); //unshift agrega un elemento al inicio del array, en este caso el encabezado del CSV
    const blob = new Blob([rows.join('\n')], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'habits.csv';
    a.click();
  }

function exportHabitToCSV() {
  const habits = habitService.listHabits();
  const rows = habits
    .map((habit) => ({
      name: habit.name,
      frequency: habit.frequency,
      count: habit.getLogs().length,
    }))
    .map((row, idx) => {
      const header =
        idx === 0
          ? `Name,Frequency,Count\n${row.name},${row.frequency},${row.count}`
          : "";
      const body = `${row.name},${row.frequency},${row.count}`;
      return header || body;
    })
    .join("\n");

  const blob = new Blob([rows], { type: "text/csv" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "habits.csv";
  a.click();
}

Resumen

¿Cómo preparar el botón de exportar en el HTML?

Antes de escribir la lógica, necesitas un punto de entrada visual. La idea es agregar un botón junto a los controles que ya tenías, por ejemplo al lado de Registrar.

En el HTML se agrega un botón con el texto Exportar y un identificador claro como exportHabits. Ese id será el que uses después para engancharle el listener desde JavaScript [1:00].

¿Dónde debo colocar el botón de exportar? Junto a los botones existentes de tu interfaz, con un id único que puedas seleccionar desde JavaScript. Lo demás lo maneja el listener.

Una vez recargues con Hard Reload (clic secundario sobre el botón de refresh del navegador), el botón aparece disponible para engancharle la lógica.

¿Cómo transformar los datos con map antes de exportar?

Desde setupModelListeners se agrega un listener al botón que dispara la función exportToCSV. Dentro de esa función, el primer paso es acceder a la lista de hábitos y aplicar map [3:30].

La primera transformación crea un objeto nuevo por cada hábito con tres atributos:

El nombre del hábito.
La frecuencia con la que se realiza.
La cantidad de registros, calculada con el método getLogs().length.

¿Puedo encadenar varios map en el mismo pipeline?

¿Cómo generar el archivo CSV descargable con Blob?

Con los datos ya transformados en filas, falta unirlas y empaquetarlas como archivo. Aquí entran tres piezas: join, Blob y una etiqueta ancla temporal en el DOM [7:40].

¿Qué es un Blob en JavaScript? Es un objeto que representa datos binarios o de texto listos para tratarse como archivo dentro del navegador. Sirve para CSV, TXT e incluso PDF.

¿Cómo forzar la descarga automática del archivo?

Ese clic simulado le dice al navegador que descargue el archivo como si el usuario hubiera hecho clic en un enlace real. Es un truco elegante que evita depender de backends o librerías pesadas.

¿Qué obtienes al final y cómo mejorar el reporte?

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Exportar CSV desde el navegador con map

Progreso del curso

Grabacion

Recursos

Recursos