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
Top comments (0)