javascript - 使用 javascript 在 HTML 表中添加 json 数组对象

标签 javascript json

我想将 json 文件中的数据添加到 HTML 表中，但我不知道如何正确执行此操作...

我有一个 json 文件，其中三个城市的天气被设置为对象。对于每个城市，我有 3 天的天气(最低温度、最高温度、风和图片)。该表一次显示一个城市的天气(3 天的天气预报)。

我还有一个选择下拉菜单，您可以在其中选择不同的城市作为该城市的天气预报。

如何将 json 数据放入表中，并在选择另一个城市时更改它...

我的 json 文件:

[{
  "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"
    }
  ]    
}]

我的 JavaScript 文件:

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

我的 HTML 表格:

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

最佳答案

  • 让 weerdata 成为全局变量。
  • 使用 addEventListener("change", function() {... 监听 select 上的事件。
  • 创建一个函数来获取所选城市并显示值。

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>

关于javascript - 使用 javascript 在 HTML 表中添加 json 数组对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61147511/

上一篇：javascript - 在discord.js 中设置 channel 权限时遇到问题

下一篇：javascript - Gulp-terser 不按顺序进行压缩

相关文章：

javascript - 不允许在 WebAPI 中发帖的方法

javascript - 警报(20e-1 ['toString'](2))； javascript

javascript - 如何按顺序打开 Div

javascript - 如何在 JSON 文件中搜索？

java - 如何在 JSON 响应中仅获取实体 ID 而不是整个实体

javascript - 单击更改主图像不起作用

javascript - 如何在 JavaScript 中操作 JSON 数据而不产生副作用？

C#写Json文件报错

javascript - KnockoutJS - 无法从纯 JSON 数组映射模型

javascript - "use strict"在 JavaScript 中做了什么，背后的原因是什么？

©2024 IT工具网  联系我们