add json array object in HTML table using javascript

Question

I want to add data from a json file into a HTML table, but I get stuck on how to do it correctly...

I have a json file where the weather for three cities is set into objects. For each city I have 3 days of weather (min temp, max temp, wind and a picture/picto). The table shows the weather for one city at a time (a 3 day forecast).

I also have a select dropdown where you can choose a different city for the forecast of that city.

How can I put the json data in the table and also change it when another city is chosen...

My json file:

[{
  "city": "Amsterdam",
  "weer": [
    {
      "minTemp": 6,
      "maxTemp": 14,
      "wind": "geen",
      "picto": "picto/rain%20(1).png"
    },
    {
      "minTemp": 4,
      "maxTemp": 13,
      "wind": "NO",
      "picto": "picto/rainsun.png"
    },
    {
      "minTemp": 5,
      "maxTemp": 15,
      "wind": "NW",
      "picto": "picto/rainsun.png"
    },
    {
      "minTemp": 9,
      "maxTemp": 16,
      "wind": "ZW",
      "picto": "picto/rain%20(1).png"
    }
  ]
},
{
"city": "Antwerpen",
"weer": [
  {
    "minTemp": 10,
    "maxTemp": 18,
    "wind": "NO",
    "picto": "picto/rain%20(1).png"
  },
  {
    "minTemp": 10,
    "maxTemp": 18,
    "wind": "NO",
    "picto": "picto/rainsun.png"
  },
  {
    "minTemp": 10,
    "maxTemp": 18,
    "wind": "NO",
    "picto": "picto/rainsun.png"
  },
  {
    "minTemp": 10,
    "maxTemp": 18,
    "wind": "NO",
    "picto": "picto/sun.png"
  }
]
},

{

  "city": "Barcalona",
  "weer": [
    {
      "minTemp": 16,
      "maxTemp": 24,
      "wind": "NO",
      "picto": "picto/sun.png"
    },
    {
      "minTemp": 14,
      "maxTemp": 22,
      "wind": "NW",
      "picto": "picto/sun.png"
    },
    {
      "minTemp": 15,
      "maxTemp": 23,
      "wind": "ZW",
      "picto": "picto/rainsun.png"
    },
    {
      "minTemp": 18,
      "maxTemp": 25,
      "wind": "Z",
      "picto": "picto/sun.png"
    }
  ]    
}]

My Javascript file:

async function getJson(url) {
    let response = await fetch(url);
    return response.json();
}

async function main() {
    let weerdata = await getJson('europa_weer1.json');
    let options = "";

    // to set the city names in the select "steden" (cities)
    for (var stad in weerdata){
        options += '<option>' + weerdata[stad].city + '</option>';

    }

    console.log(options);
    document.getElementById('steden').innerHTML = options;
}

main();

// to set the date in table aswell, for the days of the forecast.
showDate();

function showDate() {
    const today = new Date();
    const tomorrow = new Date(today);
    const nextDay = new Date(today);
    const dayAfter = new Date(today);

    tomorrow.setDate(tomorrow.getDate() + 1);
    nextDay.setDate(nextDay.getDate() + 2);
    dayAfter.setDate(dayAfter.getDate() + 3);

    document.getElementById('day1').innerHTML = today.toDateString();
    document.getElementById('day2').innerHTML = tomorrow.toDateString();
    document.getElementById('day3').innerHTML = nextDay.toDateString();
    document.getElementById('day4').innerHTML = dayAfter.toDateString();
}

My HTML table:

<div class="total">
    <h1>Het weer in Europese steden</h1>
    <p>
        <label for="steden">Kies je stad:</label>
        <select id="steden" name="steden" >

        </select>
    </p>
    <table class="week" id="weer">
        <tr class="days" id="header">
            <th id="day1"></th>
            <th id="day2"></th>
            <th id="day3"></th>
            <th id="day4"></th>
        </tr>
        <tr class="picto" id="pics">
            <td><img id="img1" src="" height="40" alt=""></td>
            <td><img id="img2" src="" height="40" alt=""></td>
            <td><img id="img3" src="" height="40" alt=""></td>
            <td><img id="img4" src="" height="40" alt=""></td>
        </tr>
        <tr class="min" id="mTemp">
            <td>Min. Temperatuur</td>
            <td>Min. Temperatuur</td>
            <td>Min. Temperatuur</td>
            <td>Min. Temperatuur</td>
        </tr>
        <tr class="mintemp" id="mNum">
            <td id="min1"></td>
            <td id="min2"></td>
            <td id="min3"></td>
            <td id="min4"></td>
        </tr>
        <tr class="max" id="maTemp">
            <td>Max. Temperatuur</td>
            <td>Max. Temperatuur</td>
            <td>Max. Temperatuur</td>
            <td>Max. Temperatuur</td>
        </tr>
        <tr class="maxtemp" id="maNum">
            <td id="max1"></td>
            <td id="max2"></td>
            <td id="max3"></td>
            <td id="max4"></td>
        </tr>
        <tr class="wind" id="wind">
            <td id="wind1"></td>
            <td id="wind2"></td>
            <td id="wind3"></td>
            <td id="wind4"></td>
        </tr>
    </table>
</div>

<script src="script/weersteden.js">

</script>

Put the array into a global variable. Then add an event listener on the dropdown that finds the selected city in the global array, and displays the selected data in the table. — Barmar
– Barmar, Commented Apr 10, 2020 at 20:04
listen for changes in select using "onchange="cityChange(value)" and in cityChange function change the values of cells according to city. — M A Salman
– M A Salman, Commented Apr 10, 2020 at 20:05

ariel · Accepted Answer · 2020-04-10 22:33:02Z

Let weerdata be a global.
Use addEventListener("change", function() {... to listen to events on the select.
Make a function that takes the selected city and display the values.

var weerdata = [
  {"city": "Amsterdam","weer": [{"minTemp": 6, "maxTemp": 14, "wind": "geen", "picto": "picto/rain%20(1).png"},
    {"minTemp": 4, "maxTemp": 13, "wind": "NO", "picto": "picto/rainsun.png"},
    {"minTemp": 5, "maxTemp": 15, "wind": "NW", "picto": "picto/rainsun.png"},
    {"minTemp": 9, "maxTemp": 16, "wind": "ZW", "picto": "picto/rain%20(1).png"}]},
  {"city": "Antwerpen","weer": [{"minTemp": 10, "maxTemp": 18, "wind": "NO", "picto": "picto/rain%20(1).png"},
    {"minTemp": 10, "maxTemp": 18, "wind": "NO", "picto": "picto/rainsun.png"},
    {"minTemp": 10, "maxTemp": 18, "wind": "NO", "picto": "picto/rainsun.png"},
    {"minTemp": 10, "maxTemp": 18, "wind": "NO", "picto": "picto/sun.png"}]},
  {"city": "Barcalona", "weer": [{ "minTemp": 16, "maxTemp": 24, "wind": "NO", "picto": "picto/sun.png"},
    {"minTemp": 14, "maxTemp": 22, "wind": "NW", "picto": "picto/sun.png"},
    {"minTemp": 15, "maxTemp": 23, "wind": "ZW", "picto": "picto/rainsun.png"},
    {"minTemp": 18, "maxTemp": 25, "wind": "Z", "picto": "picto/sun.png" }]}];

async function getJson(url) {
  let response = await fetch(url);
  return response.json();
}

async function main() {
  // Uncomment to load dynamically:
  // let weerdata = await getJson('europa_weer1.json');
  let options = "";

  // to set the city names in the select "steden" (cities)
  for (var stad in weerdata) {
    options += '<option>' + weerdata[stad].city + '</option>';
  }
  var steden = document.getElementById('steden');
  steden.innerHTML = options;
  showWeather(weerdata[0].city);
  steden.addEventListener("change", function(ev) {
    showWeather(steden.value);
  });
}

function showWeather(city) {
  var data = weerdata.filter(el => el.city == city)[0].weer;
  var mins = document.querySelectorAll("#mNum td");
  var maxs = document.querySelectorAll("#maNum td");
  var winds = document.querySelectorAll("#wind td");
  var pictos = document.querySelectorAll("#pics td img");
  for (var i = 0; i < 4; i++) {
    mins[i].innerText = data[i].minTemp;
    maxs[i].innerText = data[i].maxTemp;
    winds[i].innerText = data[i].wind;
    pictos[i].src = data[i].picto;
  }
}

main();

  <label for="steden">Kies je stad:</label>
  <select id="steden" name="steden">
  </select>
  <table class="week" id="weer">
    <tr class="days" id="header">
      <th id="day1"></th> <th id="day2"></th><th id="day3"></th><th id="day4"></th>
    </tr><tr class="picto" id="pics">
      <td><img id="img1" src="" height="40" alt=""></td><td><img id="img2" src="" height="40" alt=""></td><td><img id="img3" src="" height="40" alt=""></td><td><img id="img4" src="" height="40" alt=""></td>
    </tr><tr class="min" id="mTemp">
      <td>Min.</td><td>Min.</td><td>Min.</td><td>Min.</td>
    </tr><tr class="mintemp" id="mNum">
      <td id="min1"></td><td id="min2"></td><td id="min3"></td><td id="min4"></td>
    </tr><tr class="max" id="maTemp">
      <td>Max.</td><td>Max.</td><td>Max.</td><td>Max.</td>
    </tr><tr class="maxtemp" id="maNum">
      <td id="max1"></td><td id="max2"></td><td id="max3"></td><td id="max4"></td>
    </tr><tr class="wind" id="wind">
      <td id="wind1"></td><td id="wind2"></td><td id="wind3"></td><td id="wind4"></td>
    </tr>
  </table>
</div>

Hi, thanks this helped me! I only got one more question... How does this work when I use data from a .json file? It works when I put the json array in the javascript file. But I can't get it to work when I use a json file that is in the same directory. — Ronny Giezen
– Ronny Giezen, Commented Apr 11, 2020 at 7:59
When I do that in the getJson function I get an error.... it says "weersteden.js:51 Uncaught (in promise) ReferenceError: weerdata is not defined" — Ronny Giezen
– Ronny Giezen, Commented Apr 11, 2020 at 17:17
Wait hahah, fixed it. Made showWeather a async function and got the json file in that function aswell — Ronny Giezen
– Ronny Giezen, Commented Apr 11, 2020 at 17:23

Collectives™ on Stack Overflow

add json array object in HTML table using javascript

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related