当Twitch API返回空数组时隐藏指定SPAN元素

核心逻辑是通过判断API返回的data数组长度来控制元素显示：主播在线时数组有内容（长度>0），离线时为空数组（长度=0），以此为依据切换元素的显示状态。

具体实现方案 #

方案1：直接操作元素的display样式

假设你用fetch发起API请求，修改后的代码示例如下：

// Twitch API请求示例
fetch('https://api.twitch.tv/helix/streams?user_login=目标主播用户名', {
  headers: {
    'Client-ID': '你的ClientID',
    'Authorization': 'Bearer 你的授权令牌'
  }
})
.then(res => res.json())
.then(apiRes => {
  const targetSpan = document.querySelector('.twitch-response');
  
  if (apiRes.data.length > 0) {
    // 主播在线，显示元素并填充状态
    targetSpan.style.display = 'inline-block'; // 根据你的布局需求选display值，比如block
    targetSpan.textContent = `当前直播：${apiRes.data[0].title}`;
  } else {
    // 主播离线，隐藏元素
    targetSpan.style.display = 'none';
  }
})
.catch(err => {
  console.error('API请求失败:', err);
  // 请求出错时也隐藏元素，避免显示异常内容
  document.querySelector('.twitch-response').style.display = 'none';
});

方案2：用CSS类控制显示（更优雅）

先在CSS中定义隐藏类：

.hidden {
  display: none;
}

然后在JS中通过添加/移除类来控制：

fetch('你的Twitch API地址', { /* 请求头配置 */ })
.then(res => res.json())
.then(apiRes => {
  const targetSpan = document.querySelector('.twitch-response');
  
  if (apiRes.data.length > 0) {
    targetSpan.classList.remove('hidden');
    // 填充在线状态内容
  } else {
    targetSpan.classList.add('hidden');
  }
})
.catch(err => {
  console.error('请求出错:', err);
  document.querySelector('.twitch-response').classList.add('hidden');
});

需要注意的坑 #

1. 确保DOM加载完成后再执行代码：可以把JS放在<body>末尾，或者用DOMContentLoaded事件包裹代码，避免querySelector获取不到元素。
2. 确认API返回结构：Twitch Helix API的响应外层确实包含data字段，里面是存储直播信息的数组，不要搞错层级。
3. 错误处理：请求失败时也要隐藏元素，防止元素显示空白或错误内容。

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