如何从Aeris API的details.risk.type获取General值并展示在HTML页面？

步骤1：添加页面展示容器 #

先在HTML的<body>中新增一个容器，用来显示获取到的风险类型值：

<body>
    <!-- 用于展示risk.type的容器 -->
    <div id="risk-type-display"></div>

    <!-- 原有脚本代码 -->
    <script>
        // ... 原脚本内容
    </script>
</body>

步骤2：修改脚本提取并渲染数据 #

在API请求的回调逻辑中，从返回结果里定位到details.risk.type字段，再将其插入到页面容器中。完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AerisWeather API</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

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

</head>
<body>
    <div id="risk-type-display"></div>

    <script>
    window.addEventListener('load', () => {

        const aeris = new AerisWeather('[ID]', '[SECRET]');

        const request = aeris.api()
            .endpoint('convective/outlook')
            .place('chicago,il')
            .format('json')
            .filter('all');
        request.get().then((result) => {
            // 提取目标字段并渲染
            if (result.success && result.response.length > 0) {
                const riskType = result.response[0].details.risk.type;
                document.getElementById('risk-type-display').textContent = `当前风险类型：${riskType}`;
            } else {
                document.getElementById('risk-type-display').textContent = '无法获取风险类型数据';
            }
        }).catch((error) => {
            // 处理请求错误
            document.getElementById('risk-type-display').textContent = `请求出错：${error.message}`;
            console.error(error);
        });
    });
    </script>

</body>
</html>

关键说明 #

• 通过result.response[0].details.risk.type定位目标字段：API返回的response是数组结构，取第一个元素即可访问到对应的details对象；
• 增加了异常处理：覆盖请求成功但无数据、请求失败两种场景，避免页面空白或无提示报错；
• 使用textContent渲染内容，确保数据安全展示。

内容的提问来源于stack exchange，提问作者Tater