H2: JSON andmete naitamine JS kaudu

  1. Ava vebilehe CodeSandbox ja loo uss JS projektKirjuta kood, mis kuvab JSON-i andmeid
  2. Kirjuta kood, mis kuvab JSON-i andmeid

const cars = [
  {
    Name: "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"],
  },
  {
    Name: "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 Properties</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Color</th>
          <th>Tinted Windows</th>
          <th>Wheels</th>
          <th>Roof Cargo</th>
          <th>Entertainment</th>
          <th>Accessories</th>
        </tr>
      </thead>
      <tbody>
        ${cars
          .map(
            (car) => `
          <tr class="${car["Tinted windows"] ? "tinted" : ""}">
            <td>${car.Name}</td>
            <td>${car.Color}</td>
            <td>${car["Tinted windows"] ? "Yes" : "No"}</td>
            <td>${car.Wheels}</td>
            <td>${car["Roof cargo"] || "None"}</td>
            <td>${car.Entertainment.map((e) => "" + e).join(", ")}</td>
            <td>${car.Accessories.map((a) => "" + a).join(", ")}    </td>
          </tr>
        `
          )
          .join("")}
      </tbody>
    </table>
  </div>
`;

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <link rel="stylesheet" href="styles.css" />
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <script src="./index.mjs" type="module"></script>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 0;
}

#json {
  max-width: 900px;
  margin: 20px auto;
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th,
td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background: #333;
  color: #fff;
}

td {
  background: #f9f9f9;
}

tr:hover {
  background: #f1f1f1;
}

.tinted {
  background: #e0e0e0;
}

.accessories {
  color: green;
  font-style: italic;
}

.entertainment {
  color: #006db3;
  font-style: italic;
}

Kokkuvõtte

Auto andmed on JSON masiivis mida pärast me kuvame html tabelina JS abil.