H2: Andmete lugemine ja töötlemine JSON andmevahetusformaadist

Ülesanne: Loo Codesandbox-is HTML leht, mis kuvab auto andmeid

Ülesande eesmärk on õppida töötama objektide ja massiividega JavaScriptis, pääsema ligi nende omadustele ja väljastama andmeid HTML-is mallide abil.

Esmalt lõin nimekirja (massiivi) , mis sisaldab objekte koos teabega. See on ühe objekti massiiv, mis kirjeldab masinat:

const myjson = [
  {
    Car: {
      color: "black",
      "Tinted windows": true,
      Mark: "Nissan",
      "Roof cargo": null,
      Audiosystem: "Radio, Appleplay",
      Accessories: "navigation system, self drive system, luggage cover,",
      image:
        "https://photoref.carboatservices.fr/TklTU0FO/SlVLRQ==/85e3bcf7b9489f53ef370a0af047a012/MQ==/6a317e5a1612b2df627cd32f4929b4d3.png",
    },
  },
];

2. Enne andmete väljastamist peab HTML-dokumendis olema element id=”app”, kuhu ma info paigutan.

<div id="app"></div>

3. Seejärel kasutasin JavaScripti, et saada element id=”app” ja lisada sellesse HTML-kood, mis sisaldab väärtusi js-faili objektist.

document.getElementById("app").innerHTML = `
    <div id="json">
      <h1>Car properties</h1>
      <img src="${myjson[0].Car.image}" alt="Car image" style="max-width:300px; display:block; margin-bottom:10px;">
      <p>Color: ${myjson[0].Car.color}</p>
      <p>Tinted windows: ${myjson[0].Car["Tinted windows"]}</p>
      <p>Wheels: ${myjson[0].Car.Wheels}</p>
      <p>Roof cargo: ${myjson[0].Car["Roof cargo"]}</p>
      <p>Audiosystem: ${myjson[0].Car.Audiosystem}</p>
      <p>Accessories: ${myjson[0].Car.Accessories}</p>
    </div>
  `;

Iga sisestus ${…} on viide objekti omadusele.
myjson[0] on massiivi esimene objekt.
myjson[0].Car on objekt, mis sisaldab auto omadusi.

Terve kood

const myjson = [
  {
    Car: {
      color: "black",
      "Tinted windows": true,
      Mark: "Nissan",
      "Roof cargo": null,
      Audiosystem: "Radio, Appleplay",
      Accessories: "navigation system, self drive system, luggage cover,",
      image:
        "https://photoref.carboatservices.fr/TklTU0FO/SlVLRQ==/85e3bcf7b9489f53ef370a0af047a012/MQ==/6a317e5a1612b2df627cd32f4929b4d3.png",
    },
  },
];

document.getElementById("app").innerHTML = `
    <div id="json">
      <h1>Car properties</h1>
      <img src="${myjson[0].Car.image}" alt="Car image" style="max-width:300px; display:block; margin-bottom:10px;">
      <p>Color: ${myjson[0].Car.color}</p>
      <p>Tinted windows: ${myjson[0].Car["Tinted windows"]}</p>
      <p>Wheels: ${myjson[0].Car.Wheels}</p>
      <p>Roof cargo: ${myjson[0].Car["Roof cargo"]}</p>
      <p>Audiosystem: ${myjson[0].Car.Audiosystem}</p>
      <p>Accessories: ${myjson[0].Car.Accessories}</p>
    </div>
  `;