I've been tasked with populating an HTML table using javascript arrays, but I'm having a lot of trouble understanding how to get my arrays to populate an actual HTML table. I have to create a table that has 5 menu item images, 5 menu item descriptions, and their 5 prices. I have my arrays provided below, but don't know what functions I need to perform to get the arrays to populate the HTML table. What do you recommend I do to get them populating in an HTML table?
Also, as per the assignment, I must use a numeric array to store the prices and a string array to store the image files.
I think I have to perform some kind of 'for' loop, but I'm not sure.
Thanks for all of your help, and please let me know how I can refine this question.
Thanks,
//my arrays
var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito", "Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
For starters I would recommend merging the arrays into one, to avoid any errors regarding indices.
The standard html format is of the type:
<table>
<thead>
<tr>
<th>name</th>
<th>description</th>
<th>price</th>
<th>imageSrc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chicken soup</td>
<td>Delicious creamy chicken soup</td>
<td>14.99</td>
<td><img src="chickensoup.jpg" alt="chickensoup.jpg"></td>
</tr>
</tbody>
</table>
So you need one loop to print all the headers. You need one loop to create a different row for each item. You need one last loop inside the row loop to add each cell (food property) to the row.
var items = [{
name: "Chicken soup",
description: "Delicious creamy chicken soup",
price: 14.99,
imageSrc: "chickensoup.jpg"
}, {
name: "Chicken tacos",
description: "Homemade tacos",
price: 17.99,
imageSrc: "chickentaco.jpg"
}, {
name: "Chicken quesadilla",
description: "Cheesy chicken quesadillas",
price: 15.75,
imageSrc: "chickenque.jpg"
}, {
name: "Chicken burrito",
description: "Hearty stuffed chicken burrito",
price: 22.95,
imageSrc: "chickenburrito.jpg"
}, {
name: "Chicken enchilada",
description: "World famous chicken enchilada",
price: 12.55,
imageSrc: "chickenenchilada.jpg"
}];
var propertyList = ["name", "description", "price", "imageSrc"];
var table = document.createElement("table");
var tableHeader = document.createElement("thead");
var tableHeaderRow = document.createElement("tr");
var tableBody = document.createElement("tbody");
table.setAttribute("border", "1");
document.body.appendChild(table);
table.appendChild(tableHeader);
tableHeader.appendChild(tableHeaderRow);
table.appendChild(tableBody);
propertyList.forEach(function(key) {
var headerCell = document.createElement("th");
tableHeaderRow.appendChild(headerCell);
headerCell.textContent = key;
});
items.forEach(function(foodItem) {
var foodRow = document.createElement("tr");
tableBody.appendChild(foodRow);
propertyList.forEach(function(propertyName) {
var foodProperty = document.createElement("td");
foodRow.appendChild(foodProperty);
if (propertyName === "imageSrc") {
var image = document.createElement("img");
foodProperty.appendChild(image);
image.src = foodItem[propertyName];
image.alt = foodItem[propertyName];
} else {
foodProperty.textContent = foodItem[propertyName];
}
});
});
If you cannot merge the arrays then you can use this instead.
var item = ["Chicken soup", "Chicken tacos", "Chicken quesadilla", "Chicken burrito", "Chicken enchilada"];
var itemDescription = ["Delicious creamy chicken soup", "Homemade tacos", "Cheesy chicken quesadillas", "Hearty stuffed chicken burrito", "World famous chicken enchilada"];
var itemPrice = [14.99, 17.99, 15.75, 22.95, 12.55];
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'chickensoup.jpg';
imgArray[1] = new Image();
imgArray[1].src = 'chickentaco.jpg';
imgArray[2] = new Image();
imgArray[2].src = 'chickenque.jpg';
imgArray[3] = new Image();
imgArray[3].src = 'chickenburrito.jpg';
imgArray[4] = new Image();
imgArray[4].src = 'chickenenchilada.jpg';
var foodList = {
name: item,
description: itemDescription,
price: itemPrice,
imageSrc: imgArray
};
var propertyList = ["name", "description", "price", "imageSrc"];
var table = document.createElement("table");
var tableHeader = document.createElement("thead");
var tableHeaderRow = document.createElement("tr");
var tableBody = document.createElement("tbody");
table.setAttribute("border", "1");
document.body.appendChild(table);
table.appendChild(tableHeader);
tableHeader.appendChild(tableHeaderRow);
table.appendChild(tableBody);
propertyList.forEach(function(key) {
var headerCell = document.createElement("th");
tableHeaderRow.appendChild(headerCell);
headerCell.textContent = key;
});
for (var index = 0; index < item.length; index++) {
var foodRow = document.createElement("tr");
tableBody.appendChild(foodRow);
propertyList.forEach(function(propertyName) {
var foodProperty = document.createElement("td");
foodRow.appendChild(foodProperty);
if (propertyName === "imageSrc") {
foodProperty.appendChild(foodList[propertyName][index]);
} else {
foodProperty.textContent = foodList[propertyName][index];
}
});
}