Javascript for-loop to populate a table

Question

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>

You're loading the js file in the head, before the document has loaded. Move it below the rest of the scripts in the body. — yaakov
– yaakov, Commented Jan 8, 2022 at 5:48

limekin · Accepted Answer · 2022-01-08 06:00:25Z

1

You are almost there! You have missed that cities is actually a property of cityListJSON, so if you access the data values with cityListJSON.cities[i].name you will get the results.

Update

It will be a lot easier if you check the Console provided by your browser's development tools to find what's going wrong when you are writing and running scripts for the web.

edited Jan 8, 2022 at 6:00

answered Jan 8, 2022 at 5:53

limekin

1,9541 gold badge12 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JacobCL Over a year ago

omg THANK YOU!! Programming doesn't always make you want to cry does it?

limekin Over a year ago

@JacobCL When you are beginning it might seem that way, but if you continue to gain more knowledge and experience fixing things will become very fun. For me, bugs are exciting, it will become more fun to solve them trust me. Also do mark the answer as accepted if I have helped you succeed.

Hao-Jung Hsieh · Accepted Answer · 2022-01-08 06:00:51Z

There is no variable call cities, you should use cityListJSON.cities instead, or declare a cities variable.

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,
      },
    ],
  };

  // declare a cities variable
  const cities = cityListJSON.cities

  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;
}

Collectives™ on Stack Overflow

Javascript for-loop to populate a table

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related