JSON y forEach en JavaScript: Guardar y Recorrer Datos Como un Pro

¿Has intentado guardar datos en tu página web y se pierden al recargar? ¿Te confunde cómo trabajar con información que viene de APIs o bases de datos? Te entiendo perfectamente.

En este tutorial vas a aprender dos herramientas esenciales que todo desarrollador JavaScript necesita: JSON para convertir y guardar datos, y forEach para recorrer listas de forma simple.

📦 ¿Qué es JSON?

JSON (JavaScript Object Notation) es el formato universal para intercambiar datos. Imagínalo como el "idioma común" que usan todas las aplicaciones web para comunicarse.

Veamos la diferencia:

// ✅ Objeto JavaScript (solo en tu código)
const persona = {
  nombre: "Ana",
  edad: 25
};

// ✅ JSON (texto que se puede enviar/guardar/recibir)
'{"nombre":"Ana","edad":25}'

🔄 JSON.stringify(): De Objeto a Texto

Cuando quieres guardar un objeto o enviarlo a un servidor, usas JSON.stringify():

const misDatos = {
  usuario: "carlos",
  puntuacion: 150,
  nivel: 3
};

// Convertir a JSON (texto)
const datosEnTexto = JSON.stringify(misDatos);

console.log(datosEnTexto);
// Resultado: '{"usuario":"carlos","puntuacion":150,"nivel":3}'

📥 JSON.parse(): De Texto a Objeto

Cuando recibes datos guardados o de una API, usas JSON.parse() para convertirlos de nuevo en objetos:

// Texto JSON (como viene del servidor o localStorage)
const textoJSON = '{"nombre":"Laura","tareas":["estudiar","ejercicio"]}';

// Convertir a objeto JavaScript
const datosReales = JSON.parse(textoJSON);

console.log(datosReales.nombre); // "Laura"
console.log(datosReales.tareas); // ["estudiar", "ejercicio"]

// ❌ MAL: Intentar usar datos JSON como objeto
const textoJSON = '{"nombre":"Pedro"}';
console.log(textoJSON.nombre); // undefined (es texto, no objeto)

// ✅ BIEN: Primero convertir con JSON.parse()
const objeto = JSON.parse(textoJSON);
console.log(objeto.nombre); // "Pedro"

🔄 Array.forEach(): Recorrer Listas Fácil

forEach() es la forma más simple de recorrer un array. Ejecuta una función para cada elemento:

const frutas = ["manzana", "plátano", "naranja"];

// Mostrar cada fruta
frutas.forEach(fruta => {
  console.log("Fruta: " + fruta);
});

// Resultado:
// Fruta: manzana
// Fruta: plátano
// Fruta: naranja

📊 forEach vs bucle for tradicional

// ❌ Forma antigua (más complicada)
for (let i = 0; i < frutas.length; i++) {
  console.log(frutas[i]);
}

// ✅ Forma moderna (más simple)
frutas.forEach(fruta => {
  console.log(fruta);
});

💾 localStorage: Tu Almacén Personal

localStorage es como un cajón en el navegador donde puedes guardar información. Los datos persisten aunque cierres la página.

// Guardar datos
localStorage.setItem("usuario", "María");

// Recuperar datos
const usuario = localStorage.getItem("usuario");
console.log(usuario); // "María"

// Eliminar datos
localStorage.removeItem("usuario");

🛠️ Combinando Todo: Proyecto Lista de Tareas

Vamos a crear una lista de tareas que se guarda automáticamente y no se pierde al recargar la página.

HTML básico:

<div id="app">
  <h2>Mi Lista de Tareas</h2>
  
  <input type="text" id="nuevaTarea" placeholder="Escribe una tarea...">
  <button id="agregarBtn">Agregar</button>
  
  <ul id="listaTareas"></ul>
  
  <button id="limpiarBtn">Limpiar Todo</button>
</div>

JavaScript completo:

// 📋 Array para guardar todas las tareas
let tareas = [];

// 🔗 Referencias a elementos HTML
const inputTarea = document.getElementById('nuevaTarea');
const botonAgregar = document.getElementById('agregarBtn');
const listaTareas = document.getElementById('listaTareas');
const botonLimpiar = document.getElementById('limpiarBtn');

// 💾 Función para guardar tareas en localStorage
function guardarTareas() {
  // Convertir array a texto JSON y guardarlo
  const tareasTexto = JSON.stringify(tareas);
  localStorage.setItem('misTareas', tareasTexto);
  console.log('Tareas guardadas!');
}

// 📥 Función para cargar tareas desde localStorage
function cargarTareas() {
  // Obtener texto JSON desde localStorage
  const tareasGuardadas = localStorage.getItem('misTareas');
  
  // Si existe, convertir de JSON a array
  if (tareasGuardadas) {
    tareas = JSON.parse(tareasGuardadas);
    console.log('Tareas cargadas:', tareas);
  }
}

// 📺 Función para mostrar tareas en pantalla
function mostrarTareas() {
  // Limpiar lista actual
  listaTareas.replaceChildren();
  
  // 🔄 Usar forEach para recorrer todas las tareas
  tareas.forEach((tarea, index) => {
    // Crear elemento de lista para cada tarea
    const li = document.createElement('li');
    li.textContent = tarea;
    
    // Botón para eliminar tarea individual
    const botonEliminar = document.createElement('button');
    botonEliminar.textContent = '❌';
    botonEliminar.addEventListener('click', () => {
      eliminarTarea(index);
    });
    
    li.appendChild(botonEliminar);
    listaTareas.appendChild(li);
  });
}

// ➕ Función para agregar nueva tarea
function agregarTarea() {
  const nuevaTarea = inputTarea.value.trim();
  
  if (nuevaTarea !== '') {
    tareas.push(nuevaTarea);
    inputTarea.value = '';
    guardarTareas();
    mostrarTareas();
  }
}

// ❌ Función para eliminar tarea específica
function eliminarTarea(index) {
  tareas.splice(index, 1);
  guardarTareas();
  mostrarTareas();
}

// 🗑️ Función para limpiar todas las tareas
function limpiarTodo() {
  tareas = [];
  localStorage.removeItem('misTareas');
  mostrarTareas();
}

// 🎯 Event Listeners
botonAgregar.addEventListener('click', agregarTarea);
botonLimpiar.addEventListener('click', limpiarTodo);

// Enter para agregar tarea
inputTarea.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    agregarTarea();
  }
});

// 🚀 Inicializar aplicación al cargar la página
document.addEventListener('DOMContentLoaded', () => {
  cargarTareas();
  mostrarTareas();
});

🔍 Desglose del Flujo Completo

Al recargar la página:

💡 Consejos para Expandir el Proyecto

// 📅 Agregar fecha a cada tarea
const tarea = {
  texto: inputTarea.value,
  fecha: new Date().toLocaleDateString(),
  completada: false
};

// ✅ Marcar como completada
tareas.forEach((tarea, index) => {
  if (tarea.completada) {
    li.style.textDecoration = 'line-through';
  }
});

// 🔍 Filtrar tareas pendientes
const tareasPendientes = tareas.filter(tarea => !tarea.completada);

📚 Recapitulación

🚀 ¿Qué sigue después?

Con estos métodos ya puedes crear aplicaciones que:

• Guarden configuraciones del usuario
• Mantengan listas de favoritos
• Persistan datos de juegos
• Almacenen preferencias de tema