javascript - 将 JSON 值组合成一个文本

Question

我使用此 JavaScript 将 6 小时内的预报降雪值显示在 HTML 上。 HTML 上的文本显示...0.25、0.25、0.25、0.35、0.20、0.25，而不是 1.55。返回的 JSON 结果包含 6 个不同的预测降雪值，我需要将所有值添加到一个要显示的值中。

JSON 的响应看起来像这样...

{"success":true,"error":null,"response":[{"periods":[{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.35},{"snowIN":0.20},{"snowIN":0.25}]}]}  

JS:

<script type="text/javascript" src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js">
</script>
<script type="text/javascript">


    window.onload = () => {

        const target = document.getElementById('data-reading');
        const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET');

        const request = aeris.api().endpoint('forecasts').place('pierre,sd').filter('1hr').limit('48');
        request.get().then((result) => {
            const data = result.data;
            const { periods } = data[0];
            if (periods) {
                periods.reverse().forEach(period => {
                    const snowIN = period.snowIN || '0.00';

                    const html = (`
                                 <p class="map-datavalue">${snowIN}"</p>
                            `);

                    target.insertAdjacentHTML('afterbegin', html);
                });
            }
        }); 
    }

</script>

Answer 1

您可以使用 Array.reduce 计算您的经期总数:

const target = document.getElementById('data-reading');

const result = {"success":true,"error":null,"response":[{"periods":[{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.25},{"snowIN":0.35},{"snowIN":0.20},{"snowIN":0.25}]}]} 

const data = result.response;
const { periods } = data[0];
if (periods) {
  const total = periods.reduce((sum, { snowIN }) => sum + snowIN, 0);
  const html = `<p class="map-datavalue">${total || '0.00'}</p>`;
  target.insertAdjacentHTML('afterbegin', html);
}

.map-datavalue { 
  font-family: "Arial",sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  font-weight: 700;
  text-shadow: -2px 0 #000000, 0 2px #000000, 2px 0 #000000, 0 -2px #000000;
  z-index: 6;
}

<div class="map-datavalue" id="data-reading" style="position: absolute; left: 181px; top: 56px; width:76px; height:30px">&nbsp;</div>

只需将其插入到您的 if (periods) { ... } 中，如下所示:

request.get().then((result) => {
    const data = result.data;
    const { periods } = data[0];
    if (periods) {
        const total = periods.reduce((sum, { snowIN }) => sum + snowIN, 0);
        const html = `<p class="map-datavalue">${total || '0.00'}</p>`;
        target.insertAdjacentHTML('afterbegin', html);
    }
}); 

关于这一点:

const total = periods.reduce((sum, { snowIN }) => sum + snowIn, 0);

相当于:

let total = 0;
for (let i = 0; i < periods.length; ++i) {
    total += periods[i].snowIN;
}

但使用解构来获取 snowIN 属性，并使用 reduce 抽象出 for 循环。