Javascript for-loop to populate a table-CodePudding

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 >

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

CodePudding user response：

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.

CodePudding user response：

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