JSON (JavaScript Object Notation) on lihtne andmevahetuse formaat, mida kasutatakse andmete esitlemiseks ja edastamiseks, eriti veebirakendustes. JSON on tekstipõhine ja inimloetav, mis muudab selle sobivaks erinevate süsteemide ja rakenduste vaheliseks suhtlemiseks.

Objekt myJson on JSON-struktuur, mis sisaldab teavet kahe auto kohta:

import "./styles.css";

const myjson = [
  {
    Car0: {
      Color: "Rose red",
      "Tinted windows": false,
      Wheels: 4,
      "Roof cargo": null,
      Entertainment: "FM Radio, MP3, MP4, MKV player, harman/kardon speakers",
      Accessories: "satnav, cruise control",
    },
    Car1: {
      Color: "Navy blue",
      "Tinted windows": true,
      Wheels: 4,
      "Roof cargo": "Thule",
      Entertainment:
        "FM Radio, Apple CarPlay/Android Auto, Bowers & Wilkins Premium Sound speaker",
      Accessories: "self drive system, luggage cover",
    },
  },
];

document.getElementById("app").innerHTML = `
<div id="json">
    <h1> Car properties </h1>
    <h2>Car 0</h2>
    <p>Color: ${myjson[0].Car0.Color}</p>
    <p>Tinted windows: ${myjson[0].Car0["Tinted windows"]}</p>
    <p>Wheels: ${myjson[0].Car0.Wheels}</p>
    <p>Roof cargo: ${myjson[0].Car0["Roof cargo"]}</p>
    <p>Entertainment: ${myjson[0].Car0.Entertainment}</p>
    <p>Accessories: ${myjson[0].Car0.Accessories}</p>

    <p></p>

    <h2>Car 1</h2>
    <p>Color: ${myjson[0].Car1.Color}</p>
    <p>Tinted windows: ${myjson[0].Car1["Tinted windows"]}</p>
    <p>Wheels: ${myjson[0].Car1.Wheels}</p>
    <p>Roof cargo: ${myjson[0].Car1["Roof cargo"]}</p>
    <p>Entertainment: ${myjson[0].Car1.Entertainment}</p>
    <p>Accessories: ${myjson[0].Car1.Accessories}</p>
</div>`;