如何在此代码中使用循环，使其更短并动态更新 UI？

Question

我正在开发天气/旅游应用程序。输入位置后，会显示 7 天的天气预报。天气数据是从我的 server.js 获取并发送到我的 formHandler.js。我很难理解如何使用循环为 7 个预测日中的每一天动态填充 7 个 forecastDivs 的逻辑。我怎样才能最好地实现我的目标？

我的服务器代码将收集的数据从 API 发送到 formHandler.js:

// forecast data points
        let arrivalDayIndex = req.body.daysTillDep;
        let returnDayIndex = arrivalDayIndex + 7;


// an array to store this data:
        const WeatherDataArray = data.data
        const tripWeatherArray = []

        for(let i = arrivalDayIndex; i <= returnDayIndex; i++ ){
            tripWeatherArray.push(WeatherDataArray[i])
            }

            projectData.temps = tripWeatherArray.map(dayData => dayData.temp)
            projectData.descriptions = tripWeatherArray.map(dayData => dayData.weather.description)
            projectData.icons = tripWeatherArray.map(dayData => dayData.weather.icon)
            projectData.dates = tripWeatherArray.map(dayData => dayData.valid_date.split("-").reverse().join("-"))

        res.send(projectData);
        console.log(projectData);


    } catch (error) {
        console.log('error', error)
    }
}

// Add a GET route that returns the projectData object
app.get('/all', function (req, res) {
    res.send(projectData);
  })

发送到 formHandler.js 的数据示例：

{
  placeName: 'City Center',
  country: 'ES',
  temps: [
    23.9, 19.5, 17.6,
    21.6, 20.6, 19.9,
    19.6, 19.5
  ],
  descriptions: [
    'Overcast clouds',
    'Scattered clouds',
    'Scattered clouds',
    'Overcast clouds',
    'Scattered clouds',
    'Few clouds',
    'Broken clouds',
    'Overcast clouds'
  ],
  icons: [
    'c04d', 'c02d',
    'c02d', 'c04d',
    'c02d', 'c02d',
    'c03d', 'c04d'
  ],
  dates: [
    '21-05-2021',
    '22-05-2021',
    '23-05-2021',
    '24-05-2021',
    '25-05-2021',
    '26-05-2021',
    '27-05-2021',
    '28-05-2021'
  ]
}

这就是我现在在 formHandler.js 作品中所做的，但我希望能得到一些关于如何在此处使用循环的提示，这样我就可以使代码更短并动态更新UI.

const updateUI = async () => {
    const request = await fetch('http://localhost:3030/all');

    try{
        const allData = await request.json();
        console.log(allData)

        document.getElementById('day0').innerHTML =
            `<div class="date"><span>${allData.dates[0]}</span></div>
            <div class="temp"><span>${allData.temps[0]}</span> °C</div>
            <div class="description"><span>${allData.descriptions[0]}</span></div>
            <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[0]}.png">`;

        document.getElementById('day1').innerHTML =
            `<div class="date"><span>${allData.dates[1]}</span></div>
            <div class="temp"><span>${allData.temps[1]}</span> °C</div>
            <div class="description"><span>${allData.descriptions[1]}</span></div>
            <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[1]}.png">`;

        document.getElementById('day2').innerHTML =
            `<div class="date"><span>${allData.dates[2]}</span></div>
            <div class="temp"><span>${allData.temps[2]}</span> °C</div>
            <div class="description"><span>${allData.descriptions[2]}</span></div>
            <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[2]}.png">`;

        document.getElementById('day3').innerHTML =
            `<div class="date"><span>${allData.dates[3]}</span></div>
            <div class="temp"><span>${allData.temps[3]}</span> °C</div>
            <div class="description"><span>${allData.descriptions[3]}</span></div>
            <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[3]}.png">`;

        document.getElementById('day4').innerHTML =
            `<div class="date"><span>${allData.dates[4]}</span></div>
            <div class="temp"><span>${allData.temps[4]}</span> °C</div>
            <div class="description"><span>${allData.descriptions[4]}</span></div>
            <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[4]}.png">`;

        document.getElementById('day5').innerHTML =
            `<div class="date"><span>${allData.dates[5]}</span></div>
            <div class="temp"><span>${allData.temps[5]}</span> °C</div>
            <div class="description"><span>${allData.descriptions[5]}</span></div>
            <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[5]}.png">`;

        document.getElementById('day6').innerHTML =
            `<div class="date"><span>${allData.dates[6]}</span></div>
            <div class="temp"><span>${allData.temps[6]}</span> °C</div>
            <div class="description"><span>${allData.descriptions[6]}</span></div>
            <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[6]}.png">`;
    }
    catch (error) {
        console.log("error", error);
    }
};

欢迎对此代码进行任何改进。

谢谢！

Answer 1

使用 for 循环遍历数据 7 天。

const updateUI = async () => {
    //const request = await fetch('http://localhost:3030/all');

    try{
        //const allData = await request.json();
        const allData = await getDataStub(); // calling the data stub to simulate fetch api.
        //console.log(allData)
        
        for (let i = 0; i < 7; i++) {
        const divId = `day${i}`;
          document.getElementById(divId).innerHTML =
              `<div class="date"><span>${allData.dates[i]}</span></div>
              <div class="temp"><span>${allData.temps[i]}</span> °C</div>
              <div class="description"><span>${allData.descriptions[i]}</span></div>
              <img class="icon" src="https://www.weatherbit.io/static/img/icons/${allData.icons[i]}.png">`;
        }
    }
    catch (error) {
        console.log("error", error);
    }
};


const getDataStub = async () => {
  return new Promise((resolve, reject) => {
    const data = {
  placeName: 'City Center',
  country: 'ES',
  temps: [
    23.9, 19.5, 17.6,
    21.6, 20.6, 19.9,
    19.6, 19.5
  ],
  descriptions: [
    'Overcast clouds',
    'Scattered clouds',
    'Scattered clouds',
    'Overcast clouds',
    'Scattered clouds',
    'Few clouds',
    'Broken clouds',
    'Overcast clouds'
  ],
  icons: [
    'c04d', 'c02d',
    'c02d', 'c04d',
    'c02d', 'c02d',
    'c03d', 'c04d'
  ],
  dates: [
    '21-05-2021',
    '22-05-2021',
    '23-05-2021',
    '24-05-2021',
    '25-05-2021',
    '26-05-2021',
    '27-05-2021',
    '28-05-2021'
  ]
};
resolve(data);
  });
}

updateUI();

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="day0"></div>
<div id="day1"></div>
<div id="day2"></div>
<div id="day3"></div>
<div id="day4"></div>
<div id="day5"></div>
<div id="day6"></div>

</body>
</html>

如何在此代码中使用循环，使其更短并动态更新 UI？

How to use a loop in this code, make it shorter and dynamically update the UI?

javascript

loops

dynamic