Displaying Car Information Dynamically Using JavaScript and HTML
Tags: javascript, beginners, programming, webdev
Published: 2024-07-04 06:23:52

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`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9c55nxddm9iur2zr3im.png)

_**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`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37xwi04knjnxbtkn93hy.png)

_**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**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5ri37wda09twbqsou6q.png)