JavaScript

Tema 5 · JSON – Intercanvi de dades tècniques

Introducció

JSON (JavaScript Object Notation) és un format lleuger per intercanviar dades, àmpliament usat en aplicacions web i IoT. En enginyeria, JSON serveix per emmagatzemar configuracions de màquines, lectures de sensors, catàlegs de components i dades de projectes.

Objectius

  • Convertir objectes JavaScript a JSON amb JSON.stringify()
  • Parsejar cadenes JSON a objectes amb JSON.parse()
  • Carregar fitxers JSON locals amb fetch() i mostrar-ne el contingut al DOM
  • Emmagatzemar dades de sensors o components en format JSON

De JavaScript a JSON i viceversa

Convertir una especificació tècnica d'un motor a JSON i després recuperar-la:

const motor = {
  model: "MTR-400",
  potencia_W: 1500,
  tensio_V: 230,
  rpm: 1450,
  actiu: true
};

// Convertir a JSON (cadena de text)
const jsonMotor = JSON.stringify(motor, null, 2);
console.log(jsonMotor);

// Parsejar de nou a objecte
const objMotor = JSON.parse(jsonMotor);
console.log(`Potència: ${objMotor.potencia_W} W`);

Carregar dades des d'un fitxer JSON

Simular la càrrega d'un catàleg de components electrònics:

// Suposem un fitxer 'components.json' amb aquest contingut:
// [ {"nom":"R1","tipus":"resistencia","valor":220}, ... ]

fetch("components.json")
  .then(response => response.json())
  .then(data => {
    const llista = document.getElementById("llista-components");
    data.forEach(comp => {
      const li = document.createElement("li");
      li.textContent = `${comp.nom}: ${comp.tipus} de ${comp.valor} Ω`;
      llista.appendChild(li);
    });
  })
  .catch(error => console.error("Error carregant JSON:", error));
El fitxer JSON ha d'estar al mateix servidor

Exemple complet: visualitzar dades de sensors

const dadesSensorJSON = `[
  { "hora": "10:00", "temperatura": 22.5, "pressio": 1012 },
  { "hora": "11:00", "temperatura": 23.1, "pressio": 1010 },
  { "hora": "12:00", "temperatura": 24.8, "pressio": 1008 }
]`;

const lectures = JSON.parse(dadesSensorJSON);

const taula = document.getElementById("taula-lectures");
taula.innerHTML = "<tr><th>Hora</th><th>Temp (°C)</th><th>Pressió (hPa)</th></tr>";
lectures.forEach(lec => {
  const fila = document.createElement("tr");
  fila.innerHTML = `<td>${lec.hora}</td><td>${lec.temperatura}</td><td>${lec.pressio}</td>`;
  taula.appendChild(fila);
});

Exercicis

  1. Crea un objecte JavaScript amb les característiques d'un microcontrolador (model, pins, freqüència) i converteix-lo a JSON.
  2. Escriu un petit fitxer JSON amb 3 components d'un circuit (resistència, LED, condensador) i carrega'l amb fetch per mostrar-lo en una llista HTML.
  3. Dissenya un formulari que generi dinàmicament un objecte JSON amb les dades introduïdes i el mostri en un <pre>.

Mini Projecte – Gestor de components electrònics

Crea una aplicació web que gestioni un petit inventari de components:

  • Defineix un array d'objectes en un fitxer inventari.json (mínim 6 components amb camps: id, nom, tipus, valor, unitats).
  • Carrega el fitxer JSON amb fetch() i mostra la llista en una taula HTML.
  • Afegeix un camp de cerca per filtrar components per tipus (sense recarregar la pàgina).
  • Permet exportar la llista actual (filtrada o completa) a una cadena JSON i mostrar-la en un quadre de text per copiar-la.

Tot el processament s'ha de fer al navegador, utilitzant el DOM i JSON.

Tema 4 Índex Tema 6