Can’t seem to wrap my head around the task given to me. I have a HTML file and an external JS file. The JS file has an array and needs a for-loop to populate a table with but I can’t seem to get the for-loop to to do anything. Best I can manage is getting the table headers to show.
What’s wrong with my for-loop and why won’t it populate the table?
I appreciate any help!
function buildCitiesList() {
const cityListJSON = {
cities: [
{
name: "Adelaide",
state: "SA",
text: "Lovely city on the Torrens River",
avgrainfall: 547,
sunnydays: 224,
},
{
name: "Brisbane",
state: "QLD",
text: "Capital city of Queensland",
avgrainfall: 1080,
sunnydays: 261,
},
{
name: "Canberra",
state: "ACT",
text: "Where the federal politicians are!",
avgrainfall: 602,
sunnydays: 246,
},
{
name: "Darwin",
state: "NT",
text: "Crazy and funny folks, up north!",
avgrainfall: 1812,
sunnydays: 239,
},
{
name: "Hobart",
state: "TAS",
text: "Beautiful but very chilly winters...",
avgrainfall: 569,
sunnydays: 193,
},
{
name: "Melbourne",
state: "VIC",
text: "City with four seasons in one day",
avgrainfall: 518,
sunnydays: 185,
},
{
name: "Perth",
state: "WA",
text: "A long drive but worth it!",
avgrainfall: 734,
sunnydays: 265,
},
{
name: "Sydney",
state: "NSW",
text: "Prettiest harbour in the world!",
avgrainfall: 1042,
sunnydays: 236,
},
],
};
mytable =
"<table class='table'>" +
"<tr><th>#</th><th>City</th><th>State</th><th>Comment</th><th>Avg Rainfall</th><th>Sunny Days</th><th>Best Activity</th></tr>";
for (i = 0; i < 8; i++) {
mytable +=
"<tr><td>" +
i +
"</td><td>" +
cities[i].name +
"</td><td>" +
cities[i].state +
"</td><td>" +
cities[i].text +
"</td><td>" +
cities[i].avgrainfall +
"</td><td>" +
cities[i].sunnydays +
"</td></tr>";
}
mytable += "</table>";
document.getElementById("table").outerHTML = mytable;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Task 6.3C</title>
<meta name="author" content="" />
<meta name="description" content="Conditions and Functions" />
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<script src="citiesJSON.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Australian Capital Cities & Information</h1>
<p>
Click the button below to build and display a list of Australian Cities
along with some interesting information.
</p>
<main>
<!--TO UPDATE-->
<div id="table"></div>
<input
class="btn btn-primary"
type="button"
onclick="buildCitiesList()"
value="Display Capital Cities"
/>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>