Harjutus 2: JSON andmete näitamine JS kaudu

Esimine ja Teine auto

  {
    Name: "Honda",
    Color: "red",
    "Tinted windows": false,
    Wheel: 4,
    "Roof cargo": null,
    Entertaiment: [
      "FM radio",
      "MP3, MP4 and MKV player",
      "harman/karbon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
  {
    Name: "McLaren",
    Color: "red",
    "Tinted windows": false,
    Wheel: 4,
    "Roof cargo": null,
    Entertaiment: [
      "FM radio",
      "MP3, MP4 and MKV player",
      "harman/karbon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
document.getElementById("app").innerHTML = `
  <div>
    <h1>Car Properties</h1>
    <table border="1" cellpadding="5" cellspacing="0">
      <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>
      ${car
        .map(
          (car) => `
        <tr>
          <td>${car.Name}</td>
          <td>${car.Color}</td>
          <td>${car["Tinted windows"] ? "Yes" : "No"}</td>
          <td>${car.Wheel}</td>
          <td>${car["Roof cargo"] || "None"}</td>
          <td>${car.Entertaiment.map((e) => "❤️ " + e).join(", ")}</td>
          <td>${car.Accessories.map((e) => "🤣 " + e).join(", ")}</td>
        </tr>
      `
        )
        .join("")}
    </table>
  </div>
`;

lisasin Entertainment ja Accessories emoje ❤️, 🤣 andsin Tinted windows kas on Yes või No

Lisasin stiile tableisse

body {<br>  font-family: sans-serif;<br>}<br>table {<br>  width: 100%;<br>  border-collapse: collapse;<br>  font-family: Arial, sans-serif;<br>}<br>th,<br>td {<br>  border: 1px solid #ccc;<br>  padding: 8px 12px;<br>  text-align: left;<br>}<br>thead {<br>  background-color: #333;<br>  color: white;<br>}<br>tbody tr:nth-child(even) {<br>  background-color: #f9f9f9;<br>}<br>tbody tr:hover {<br>  background-color: #d1e7fd;<br>}<br>.tinted {<br>  background-color: #fff2cc !important;<br>}<br><br>

index.html

JavaScript Sandbox

Ja seda me saame pärast kui kirjutasime kõikke

Kokkuvõtte:

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