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

Index.mjs:

import "./styles.css";

const myJson = {
  Car0: {
    Color: "Rose red",
    "Tinted windows": false,
    Wheels: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM Radio",
      "MP3, MP4 and 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 speakers",
    ],
    Accessories: ["self drive system", "luggage cover"],
  },
};

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

document.getElementById("app1").innerHTML = `
<div id="json">
    <h1>Car 1 properties</h1>
    <p>Color: ${myJson.Car1.Color}</p>
    <p>Tinted windows: ${myJson.Car1["Tinted windows"]}</p>
    <p>Wheels: ${myJson.Car1.Wheels}</p>
    <p>Roof cargo: ${myJson.Car1["Roof cargo"]}</p>
    <p>Audiosystem: ${myJson.Car1.Entertainment[0]}, ${myJson.Car1.Entertainment[1]}, ${myJson.Car1.Entertainment[2]}</p>
    <p>Accessories: ${myJson.Car1.Accessories[0]}, ${myJson.Car1.Accessories[1]}</p>
</div>`;

kokkuvõte:

Loodud on lehekülg, mis loeb andmeid JSON-objektist ja kuvab valitud teavet sõidukite kohta (värv, toonitud klaasid, rataste arv, katusebagasi, multimeedia ja lisavarustus).