JavaScript教程：从API获取并正确渲染动态新闻列表

<div class="box" id="insert-news">
    <div class="title">Marketplace </div>
    <h2>Live News</h2>
    <p><span class='highlight'>News Article</span></p>
    <!-- 这里将动态插入新闻标题 -->
</div>

function getData(){
    fetch('https://api.coinstats.app/public/v1/news?skip=0&limit=10').then(response => {
        return response.json();
    }).then(data => {
        console.log(data.news[2].title); // 调试用途
        let newsTitle =''; // 初始化一个空字符串
        data.news.map((values)=>{
            // 每次迭代都会完全覆盖 newsTitle 的内容
            newsTitle = `<div class="title">Marketplace </div>
        <h2>Live News</h2>
        <p><span class='highlight'>News Article</span></p>
        <p>${values.title}</p>
    </div>`;
        });
        // 最终只有最后一次迭代赋给 newsTitle 的值会被设置到 DOM 中
        document.getElementById('insert-news').innerHTML = newsTitle;
    });
}

getData();

function getData() {
  fetch("https://api.coinstats.app/public/v1/news?skip=0&limit=10")
    .then((response) => {
      // 确保响应成功，并解析JSON数据
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      // 检查数据结构，确保 news 数组存在
      if (data && data.news && Array.isArray(data.news)) {
        // 使用 map 遍历 news 数组，为每一项生成一个 HTML 字符串
        // map 方法会返回一个由这些 HTML 字符串组成的新数组
        const newsHtmlArray = data.news.map(
          (values) =>
            `<div class="news-item">
                <div class="title">Marketplace </div>
                <h2>Live News</h2>
                <p><span class='highlight'>News Article</span></p>
                <p>${values.title}</p>
            </div>` // 注意这里将每个新闻项包裹在一个新的 div 中，以便区分
        );

        // 使用 join('') 将 HTML 字符串数组连接成一个单一的字符串
        // 然后将其赋值给 innerHTML
        document.getElementById("insert-news").innerHTML = newsHtmlArray.join("");
      } else {
        console.error("API返回的数据结构不符合预期或没有新闻数据。");
        document.getElementById("insert-news").innerHTML = "<p>未能加载新闻。</p>";
      }
    })
    .catch((error) => {
      console.error("获取数据时发生错误:", error);
      document.getElementById("insert-news").innerHTML = `<p>加载新闻失败: ${error.message}</p>`;
    });
}

// 调用函数以获取并显示数据
getData();