如何从ads对象数组随机选单个对象展示？现有代码误显示全部对象

问题核心原因 #

你的代码存在两个关键错误，导致最终展示所有广告而非单个随机广告：

• 数组访问错误：你传入的data是包含ads数组的顶层JSON对象，直接使用data.length会得到undefined，实际应该通过data.ads获取广告数组。
• 循环逻辑完全错误：你写的for (let i = 0; i = Math.floor(Math.random() * data.length); i++)是赋值操作而非条件判断，这会让循环持续执行（随机索引值为真值），最终遍历了所有广告项。

修复后的完整代码 #

fetch("src/js/_ads.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log('error: ' + err);
  });

function appendData(data) {
  // 获取正确的广告数组
  const ads = data.ads;
  // 生成单个随机索引，范围覆盖数组所有元素
  const randomIndex = Math.floor(Math.random() * ads.length);
  // 取出随机选中的广告对象
  const randomAd = ads[randomIndex];

  // 提取广告对象的属性
  const adLink = randomAd.adLink;
  const adDesc = randomAd.adDescription;
  const adLogo = randomAd.adLogo;
  const adCompany = randomAd.adCompany;
  const adBackground = randomAd.adBackgroundColor;

  // 渲染广告内容
  document.querySelector("#ad-block").innerHTML += `
    <a href="${adLink}" target="_blank" id="ad-click">
      <div class="ad__banner ad__banner--dark ad__banner--column">
        <div class="ad__image" style="background-color: ${adBackground}">
          <img src="${adLogo}" alt="sponsored by ${adCompany}">
        </div>
        <div class="ad__desc">
          <div class="ad__tagline">${adDesc}</div>
          <div class="ad__button" style="background-color: var(--gray-700)">Start Free Trial</div>
          <div class="ad__sponsored"><strong style="color: ${adBackground}">${adCompany}</strong> Affiliate</div>
        </div>
      </div>
    </a>
  `;
}

额外优化建议 #

• 如果需要避免重复叠加广告（比如多次调用函数时），可以先清空容器内容：

  const adBlock = document.querySelector("#ad-block");
  adBlock.innerHTML = ''; // 清空原有内容
  adBlock.innerHTML += `...广告代码...`;
  

• 注意你原始JSON中第二个广告的adLink存在拼写错误（ad_compan21_link_goes_here），建议修正为正确的链接格式。

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