Function that takes an abbreviation as input and returns fullname string-CodePudding

I'm struggling to tackle the task here - I have 2 files: a HTML and external JS file. I need a function to take an element from the 'cities' array as input, to then return a string as an output to be used in the for-loop that populates my table.

I have a function with a switch statement and call it from my for-loop which makes sense to me, but clearly I'm missing something fundamental - Really appreciate any guidance !

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>"  
      cityListJSON.cities[i].name  
      "</td><td>"  
      cityListJSON.cities[i].fullStateName(state)  
      "</td><td>"  
      cityListJSON.cities[i].text  
      "</td><td>"  
      cityListJSON.cities[i].avgrainfall  
      "</td><td>"  
      cityListJSON.cities[i].sunnydays  
      "</td></tr>";

  mytable  = "</table>";
  document.getElementById("table").outerHTML = mytable;


}

function fullStateName(state) {
    switch (state) {
      case "SA":
        return "South Australia";

      case "WA":
        return "Western Australia";

      case "QLD":
        return "Queensland";

      case "NT":
        return "Northern Territory";

      case "NSW":
        return "New South Wales";

      case "ACT":
        return "Canberra";

      case "TAS":
        return "Tasmania";

      case "VIC":
        return "Victoria";
    }
  }

<!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="TESTcitiesJSON.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>

I've included the HTML file for good measure.

CodePudding user response：

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

  const numberOfCities = cityListJSON.cities.length

  for (i = 0; i < numberOfCities; i  )
    mytable  =
      "<tr><td>"  
      i  
      "</td><td>"  
      cityListJSON.cities[i].name  
      "</td><td>"  
        fullStateName(cityListJSON.cities[i].state)  
      "</td><td>"  
      cityListJSON.cities[i].text  
      "</td><td>"  
      cityListJSON.cities[i].avgrainfall  
      "</td><td>"  
      cityListJSON.cities[i].sunnydays  
      "</td></tr>";

  mytable  = "</table>";
  document.getElementById("table").outerHTML = mytable;
}