WebLab Practicar

DATOS PARA LA WEB

Aprende JSON escribiendo.

Lee un ejemplo de Pokémon, cambia sus valores y comprueba el resultado. Distingue el texto JSON del valor que obtiene JavaScript al interpretarlo.

1. JSON representa datos como texto

JavaScript Object Notation es un formato de intercambio que también pueden leer otros lenguajes.

Un archivo pokemon.json puede guardar datos sin ejecutar instrucciones. JSON no dibuja una página: HTML define su estructura, CSS su aspecto y JavaScript puede leer esos datos y mostrarlos.

Una API puede responder con JSON usando Content-Type: application/json. También sirve para archivos de configuración o intercambiar datos entre aplicaciones. 

{
  "nombre": "Pikachu",
  "numero": 25,
  "tipos": ["Eléctrico"],
  "favorito": true,
  "apodo": null
}

Este ejemplo es propio y simplificado; no representa la respuesta completa de PokéAPI.

2. Construye la estructura

Las claves de un objeto y los textos llevan comillas dobles. Los valores pueden ser objetos, arrays, textos, números, booleanos o null.

  1. Abre un objeto con {. Define pares como "nombre": "Pikachu".
  2. Separa propiedades con comas. La última propiedad no lleva coma final.
  3. Usa [] para una lista. Por ejemplo, "tipos": ["Planta", "Veneno"].
  4. Anida otro objeto cuando los datos estén relacionados. Por ejemplo, "datos": {"region": "Kanto"}.
  5. Cierra los corchetes y las llaves. Cada apertura debe tener su cierre.

"25" es texto; 25 es número. true es un booleano; "true" es texto. null expresa un valor nulo.

JSON no admite comentarios, funciones, undefined, NaN ni Infinity. También puede contener un array o un valor simple en su raíz.

3. Escribe, valida y compara

Cambia el nombre, añade un tipo o modifica favorito. Después prueba quitar una comilla: verás un error y podrás corregirlo.

El contenido se procesa en este navegador. No se ejecuta código ni se envía a un servidor.

El resultado de interpretar tus datos

Pulsa Validar y mostrar.

JSON con sangría

Todavía no se ha interpretado el ejemplo.

La vista de Pokémon utiliza nombre, numero, tipos y favorito. Otros datos válidos se muestran en el bloque de texto.

4. Del texto al valor, y de vuelta

Usa parse para interpretar y stringify para producir texto JSON.

JSON.parse(texto)

const texto = '{"nombre":"Pikachu","tipos":["Eléctrico"]}';
const pokemon = JSON.parse(texto);
console.log(pokemon.nombre); // Pikachu
console.log(pokemon.tipos[0]); // Eléctrico

Si la sintaxis no es válida, lanza un error. Captúralo con try / catch, como hace el editor.

JSON.stringify(valor)

const pokemon = { nombre: "Pikachu", numero: 25 };
const texto = JSON.stringify(pokemon, null, 2);
console.log(texto); // texto JSON con sangría

El último argumento indica espacios de sangría. No todo valor JavaScript se conserva: undefined y funciones se omiten en objetos; las referencias circulares producen un error.

Una sintaxis válida no garantiza la estructura esperada. {"nombre": 25} es JSON válido, pero una interfaz que espera un nombre de texto debe comprobar el tipo.

5. Así se conecta con una API

HTTP transporta la respuesta; JSON organiza los datos. Son responsabilidades diferentes. 

async function leerPokemon() {
  const response = await fetch("https://pokeapi.co/api/v2/pokemon/25");
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const pokemon = await response.json();
  console.log(pokemon.name);
}

response.json() lee e interpreta el cuerpo de la respuesta. Si ya tienes el valor interpretado, no necesitas llamar de nuevo a JSON.parse().

El ejemplo no se ejecuta automáticamente. Estudia fetch en JavaScript y repasa HTTP.

Reto: añade un tercer miembro al equipo y localiza su nombre con datos.equipo[2].nombre. Los índices empiezan en cero.