Exportar CSV con map en JavaScript

Genera un reporte CSV de tus hábitos en JavaScript, sin backend y en pocas líneas. Con map, un listener de clic y un Blob del tipo text/csv, transformarás tus datos en filas separadas por comas y forzarás la descarga automática. Además, verás detalles cruciales: legibilidad vs rendimiento al encadenar maps, uso de hard reload y la regla de que un Blob recibe un array.

¿Cómo exportar un CSV con map en JavaScript?

Para activar la exportación, se añade un botón y se conecta con un listener de clic que llama a una función clara: exportToCSV. Primero valida que el botón exista y que el evento dispare un log, luego implementa la lógica de transformación y descarga.

• Añade un botón visible cerca de Registrar.
• Conecta el clic a una función dedicada.
• Verifica con un console.log antes de avanzar.
• Usa hard reload si el caché impide ver cambios.

<button id="export-habits">Exportar</button>

// Listener de clic
const btnExport = document.getElementById('export-habits');
btnExport.addEventListener('click', exportToCSV);

function exportToCSV() {
  console.log('Exportar clickeado');
  // aquí irá la transformación y descarga.
}

¿Qué pasos siguen para transformar datos a formato CSV?

La clave es una transformación con map: de instancias con métodos (POO) a objetos planos con tres atributos: nombre, frecuencia y count. Luego, otra pasada con map para dar forma a filas CSV (lista separada por comas). Finalmente, un join con saltos de línea crea el texto final.

¿Cómo construir filas con map?

• Toma la lista actual de hábitos.
• Calcula cuántas veces se repite con el método getBlocks().
• Devuelve objetos planos listos para formatear.

// Suponiendo un array de hábitos con métodos de POO
// name, frequency y getBlocks() existen en cada hábito
const filasObjeto = habitos.map(h => ({
  nombre: h.name,
  frecuencia: h.frequency,
  count: h.getBlocks().length,
}));

// A CSV: "nombre,frecuencia,count"
const filasCSV = filasObjeto.map(o => `${o.nombre},${o.frecuencia},${o.count}`);

// Texto final separado por saltos de línea
const csvTexto = filasCSV.join('\n');

¿Por qué encadenar varios map?

• Mejora la legibilidad al separar responsabilidades.
• Facilita pruebas y cambios localizados.
• En rendimiento, una sola pasada puede ser mejor, pero varios maps también son válidos si el código queda más claro.

¿Qué formato usa CSV y cómo aplicar join?

• CSV es valores separados por comas.
• Cada fila corresponde a un hábito transformado.
• join con "\n" construye el reporte completo.
• Método disponible en arrays y también en strings.

¿Cómo descargar el archivo con blob y un enlace temporal?

Una vez que tienes el texto CSV, crea un Blob indicando el tipo text/csv. Importante: el Blob debe recibir un array, no un string directo. Luego genera una URL temporal, inyecta un enlace ancla con atributo download (por ejemplo, Xavi.csv) y simula el clic para descargar.

function exportToCSV() {
  const filasObjeto = habitos.map(h => ({
    nombre: h.name,
    frecuencia: h.frequency,
    count: h.getBlocks().length,
  }));

  const filasCSV = filasObjeto.map(o => `${o.nombre},${o.frecuencia},${o.count}`);
  const csvTexto = filasCSV.join('\n');

  // Blob: siempre enviar un array
  const blob = new Blob([csvTexto], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'Xavi.csv';
  a.click();
}

• Usa text/csv como tipo MIME.
• El nombre del archivo se define con download.
• La descarga es automática al simular el clic.

Tips prácticos:

• Si no ves cambios, usa hard reload para limpiar caché.
• Si pierdes hábitos al recargar, evalúa guardar en localStorage.
• Considera añadir headers al CSV como mejora: nombre, frecuencia, count.
• Recuerda que map también sirve para render, aquí lo usamos como pipeline de transformación de datos para reporte.

¿Te animas a mejorar la exportación añadiendo headers y afinando la legibilidad del pipeline? Cuéntame cómo lo implementarías y qué otros campos sumarías al CSV.