Displaying Car Information Dynamically Using JavaScript and HTML

We will explore how to display car information using _JavaScript _and HTML dynamically. We'll create a simple web page that showcases car details in a table format, demonstrating how to retrieve and render data from JavaScript objects. Whether you're new to web development or looking to enhance your skills, this guide will walk you through the process step-by-step.

Example 1. It is a normal object

index.html

  <div class="row">
      <table class="table table-bordereds">
        <thead>
          <td>Sr.No</td>
          <td>Name</td>
          <td>Color</td>
        </thead>
        <tbody class="bg-light" id="CarInfo"></tbody>
      </table>
    </div>

script.js

 let myCar = {
        name: "Rang Rover",
        Color: "Black",
      };
` console.log(myCar.name);`
let CarInfoDisplay = `
                <td scope="row">${1}</td>
                <td>${myCar.name}</td>
                <td>${myCar.Color}</td>
        `;

      document.getElementById("CarInfo").innerHTML = CarInfoDisplay;

Our output will appear like this

index.html

Example 2. It is a nested object

index.html

   <div class="row">
      <table class="table table-bordereds">
        <thead>
          <td>Sr.No</td>
          <td>Name</td>
          <td>Color</td>
          <td>Module</td>
          <td>Price</td>
          <td>Run</td>
          <td>State</td>
          <td>City</td>
        </thead>
        <tbody class="bg-light" id="CarInfo"></tbody>
      </table>
    </div>

Script.js

let myCar = {
        name: "Rang Rover",
        Color: "Black",
        carinfo: {
          module: "2024",
          price: "5,54,900/-",
          freeservice: "5",
          run: "5000",
          state: "MH",
          city: "Nanded",
        },
      };

      let CarInfoDisplay = `
                <td scope="row">${1}</td>
                <td>${myCar.name}</td>
                <td>${myCar.Color}</td>
                <td>${myCar.carinfo.module}</td>
                <td>${myCar.carinfo.price}</td>
                <td>${myCar.carinfo.run}</td>
                <td>${myCar.carinfo.state}</td>
                <td>${myCar.carinfo.city}</td>
        `;

      document.getElementById("CarInfo").innerHTML = CarInfoDisplay;

Our output will appear like this

index.html

Example 3. Array Of Objects
index.html

  <div class="container">

    <div class="row">
      <table class="table table-bordereds">
        <thead>
          <td>Sr.No</td>
          <td>Name</td>
          <td>Color</td>
          <td>Module</td>
          <td>Price</td>
          <td>Run</td>
          <td>State</td>
          <td>City</td>
        </thead>
        <tbody class="bg-light" id="CarInfo"></tbody>
      </table>
    </div>
  </div>

Script.js

let myCar = [
        {
          id: 1,
          name: "Rang Rover",
          Color: "Black",
          carinfo: {
            module: "2024",
            price: "5,54,900/-",
            run: "5000",
            state: "MH",
            city: "Nanded",
          },
        },
        {
          id: 2,
          name: "Thunderbolt",
          Color: "Gray",
          carinfo: {
            module: "2020",
            price: "44,79,900/-",
            run: "15,500",
            state: "MH",
            city: "Pune",
          },
        },
        {
          id: 3,
          name: "Thunderbolt",
          Color: "Blue",
          carinfo: {
            module: "2020",
            price: "44,60,900/-",
            run: "15,500",
            state: "MH",
            city: "Nanded",
          },
        },
        {
          id: 4,
          name: "Vortex",
          Color: "Red",
          carinfo: {
            module: "2022",
            price: "10,54,900/-",
            run: "15,500",
            state: "MH",
            city: "Pune",
          },
        },
        {
          id: 5,
          name: "Cobra",
          Color: "Black",
          carinfo: {
            module: "2024",
            price: "46,54,900/-",
            run: "15,500",
            state: "MH",
            city: "Nanded",
          },
        },
        {
          id: 6,
          name: "Phoenix",
          Color: "Black",
          carinfo: {
            module: "2024",
            price: "65,54,900/-",
            run: "15,500",
            state: "MH",
            city: "Hyderabad",
          },
        },
        {
          id: 7,
          name: "Falcon",
          Color: "Sky Blue",
          carinfo: {
            module: "2024",
            price: "99,54,900/-",
            run: "15,500",
            state: "MH",
            city: "hyderabad",
          },
        },
      ];

      console.log(myCar);
      console.log(myCar[0].name);
      console.log(myCar[0].carinfo.price);

      let carInfoDisplay = "";

      myCar.map((val, index) => {
        return (carInfoDisplay += `
              <tr key={index}>
              <td>${val.id}</td>
              <td>${val.name}</td>
              <td>${val.Color}</td>
              <td>${val.carinfo.module}</td>
              <td>${val.carinfo.price}</td>
              <td>${val.carinfo.run}</td>
              <td>${val.carinfo.state}</td>
              <td>${val.carinfo.city}</td>
              </tr>
             `);
      });

      document.getElementById("CarInfo").innerHTML = carInfoDisplay;

Our output will appear like this