如何通过API调用获取嵌套JSON数据并用JS在网页展示及解决报错

问题根因 #

• 嵌套字段读取逻辑错误：当前的解构写法仅能读取JSON第一层字段，family属于二级os对象的属性，无法直接从顶层data解构获取，同时代码中使用的os变量未提前定义
• DOM元素不存在/未加载完成：控制台报错Cannot set property 'textContent' of null说明document.getElementById('family')没有找到对应DOM节点，要么是页面未声明对应id的元素，要么是JS执行时DOM还未渲染完成
• 参数传递逻辑异常：原代码把UA的空格全部删除再传给接口，会导致接口无法正常解析UA信息，不需要做空格删除处理，直接传原始UA即可

修改方案 #

1. 调整解构写法，正确读取os下的嵌套属性
2. 增加DOM节点存在性判断、接口请求异常捕获逻辑，避免运行时报错
3. 增加encodeURIComponent对UA参数编码，保证接口能正确接收参数
4. 绑定DOMContentLoaded事件，保证DOM加载完成后再执行JS逻辑

首先需要在页面中添加对应展示元素：

<p id="demo"></p>
<p>UA：<span id="ua"></span></p>
<p>系统家族：<span id="family"></span></p>

修改后的JS代码：

<script>
function myFunction() {
  const rawUa = navigator.userAgent;
  document.getElementById("demo").innerHTML = rawUa;
  const api_url = 'http://api.userstack.com/detect?access_key=<key>&ua=';

  async function getData() {
    try {
      const response = await fetch(api_url + encodeURIComponent(rawUa));
      const data = await response.json();
      // 正确解构嵌套字段
      const { ua, os } = data;
      const family = os?.family;
      // 赋值前先判断DOM节点是否存在
      const uaDom = document.getElementById('ua');
      const familyDom = document.getElementById('family');
      if(uaDom) uaDom.textContent = ua;
      if(familyDom) familyDom.textContent = family;
    } catch (err) {
      console.error('请求异常：', err)
    }
  }
  getData();
}
// 保证DOM加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', myFunction)
</script>

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