H2: JSON andmete näitamine JS kaudu

import "./styles.css";

const car = [
  {
    Name: "Honda",
    Color: "red",
    "Tinted windows": false,
    Wheel: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM radio",
      "MP3, MP4 and MKV player",
      "harman/karbon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
  {
    Name: "Saab",
    Color: "blue",
    "Tinted windows": false,
    Wheel: 4,
    "Roof cargo": "thule",
    Entertainment: ["FM radio", "MP3 and MKV player", "harman/karbon speakers"],
    Accessories: ["satnav", "cruise control"],
  },
  {
    Name: "Audi",
    Color: "yellow",
    "Tinted windows": true,
    Wheel: 4,
    "Roof cargo": null,
    Entertainment: ["FM radio", "MP3 and MKV player", "harman/karbon speakers"],
    Accessories: ["cruise control"],
  },
];

document.getElementById("app").innerHTML = `
<div>
<h1>Car Properties</h1>
<table>
    <tr>
        <th>Name</th>
        <th>Color</th>
        <th>Tinted windows</th>
        <th>Wheel</th>
        <th>Roof cargo</th>
        <th>Entertainment</th>
        <th>Accessories</th>
    </tr>
    <tbody>
    ${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.Entertainment.join(", ")}</td>
        <td>${car.Accessories.join(", ")}</td>
    </tr>
    `
      )
      .join("")}
    </tbody>
</table>
</div>
`;