Question

我订阅了一个天气API，该API返回JSON中的数据。该数据返回多个值：

{
  "success": true,
  "error": null,
  "response": [
    {
      "periods": [
        { "snowIN": 0.15 },
        { "snowIN": 0.15 },
        { "snowIN": 0.18 },
        { "snowIN": 0.18 },
        { "snowIN": 0.18 },
        { "snowIN": 0.18 },
        { "snowIN": 0.18 },
        { "snowIN": 0.18 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.24 },
        { "snowIN": 0.03 },
        { "snowIN": 0.03 },
        { "snowIN": 0.03 },
        { "snowIN": 0.03 }
      ]
    }
  ]
}

我想获取这些值，获取总计并将其显示在HTML中。

我该怎么做？

在48小时内获取降雪量snowIN，并将其值显示为html上的文本。

我已经尝试过此编码...

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

结果显示所有snowIN值，而不是一个。运行html时，我也放了const aeris = new AerisWeather('CLIENT_ID', 'CLIENT_SECRET')。

Answer 1

您可以使用Array.prototype.reduce()

// Once you have the results
const api_result = {"success":true,"error":null,"response":[{"periods":[{"snowIN":0.15},{"snowIN":0.15},{"snowIN":0.18},{"snowIN":0.18},{"snowIN":0.18},{"snowIN":0.18},{"snowIN":0.18},{"snowIN":0.18},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.24},{"snowIN":0.03},{"snowIN":0.03},{"snowIN":0.03},{"snowIN":0.03}]}]};
let sum;
try {
  // Use reduce to calculate the sum
  sum = api_result.response[0].periods.reduce((r, v) => r+v.snowIN, 0);
  // JS math is not exact, so we use `toFixed` to only keep 2 decimals
  sum = sum.toFixed(2);
} catch(e) {
  // In case the data is not complete
  sum = "not available";
}
document.getElementById('sum').innerHTML = sum;

<h1>The sum is <span id="sum"></span></h1>

Answer 2

您可以通过这种方式访问数据。

const data = {"succes": true, ...}
data.response.map((value, key) => {
    // value is mapping to peridos. 
})

函数map（）可能不是绝对正确的获取数据总和的方法，但是可以。（看MDN）我建议您先练习简单的数据。

在HTML上将多个JSON响应显示为单个值

2 个答案: