API数据可在控制台获取但无法在浏览器页面展示的问题求助

我仔细看了你的代码，发现几个关键问题导致数据能在控制台拿到却无法渲染到页面上，咱们一步步来修复：

1. 模板函数的属性访问路径错误 #

你在templateNews函数里用了data.posts.title这类写法，但从你控制台能拿到数据的情况来看，DATA.data数组里的每个元素本身就是包含title、thumbnail等字段的文章对象，根本不需要再通过.posts去嵌套访问。这是导致内容无法显示的核心原因——你一直在访问不存在的属性，渲染出来的自然是空内容。

修改后的templateNews函数：

function templateNews(data) {
  let image = '';
  if (data.thumbnail !== null) {
    image = `<img src="${data.thumbnail}" alt="${data.title}">`;
  }
  return `
    <div class="col-12 col-md-6 col-lg-3 mt-4" id="news-item">
      <div class="card">
        ${image}
        <a href="${data.link}" class="mt-5">
          <h6>${data.title}</h6>
        </a>
        <p class="article-categories">${data.description}</p>
        <p class="article-time">${data.pubDate}</p>
      </div>
    </div>
  `;
}

2. 搜索过滤逻辑的冗余代码 #

你在表单提交事件里的外层循环完全没必要，直接用filter方法就能得到过滤结果，原来的写法会重复赋值filteredNews，可能导致意外问题。另外把严格匹配改成模糊匹配，用户体验会更好：

form.addEventListener('submit', (event) => {
  event.preventDefault();
  event.stopPropagation();
  
  const inputSearch = event.srcElement[0];
  const searchValue = inputSearch.value.trim().toLowerCase();
  
  // 模糊匹配标题，更符合搜索预期
  const filteredNews = DATA.data.filter((item) => {
    return item.title.toLowerCase().includes(searchValue);
  });

  newsContainer.innerHTML = '';
  for (const article of filteredNews) {
    newsContainer.innerHTML += templateNews(article);
  }
});

3. 可选：移除重复的news-container元素 #

你的HTML里有两个<div id="news-container">（一个在section区域，一个在main区域），document.querySelector('#news-container')只会选中第一个，另一个永远不会被使用。建议删掉其中一个，避免后续开发时混淆。

做完这些修改后，页面应该就能正常渲染出API返回的文章内容了。如果还有问题，可以再检查控制台有没有新的报错信息，咱们再针对性调整~

备注：内容来源于stack exchange，提问作者Muhammad Razin