本教程详细讲解如何利用javascript的fetch api从restful接口获取数据，并动态生成html内容以在网页上展示新闻标题列表。文章将深入探讨在处理数组数据时，如何避免在循环中错误地覆盖dom内容，确保所有数据项都能被正确渲染，从而解决api数据动态渲染时常见的只显示最后一项的问题。
在现代Web开发中，从后端API获取数据并将其动态呈现在前端页面是常见的需求。本教程将以一个获取新闻列表并展示标题的场景为例，详细阐述如何使用JavaScript的Fetch API来完成这一任务，并着重解决在数据渲染过程中可能遇到的内容覆盖问题。
首先，我们需要使用fetch API向指定的API端点发送请求，获取新闻数据。fetch函数返回一个Promise，我们可以通过链式调用.then()方法来处理响应。
function getData() {
fetch('https://api.coinstats.app/public/v1/news?skip=0&limit=10')
.then(response => {
// 检查响应是否成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 将响应体解析为JSON格式
return response.json();
})
.then(data => {
// 数据成功获取后，可以在这里处理 data
console.log(data.news); // 打印新闻数组
// ... 后续的DOM渲染逻辑
})
.catch(error => {
// 捕获请求或处理过程中发生的错误
console.error('获取数据失败:', error);
document.getElementById('insert-news').innerHTML = '<p>加载新闻失败，请稍后再试。</p>';
});
}
// 页面加载时调用数据获取函数
getData();在上述代码中，我们首先通过fetch获取数据，然后检查response.ok确保请求成功。接着，使用response.json()将响应体解析为JavaScript对象。最后，在第二个.then()块中，我们可以访问到解析后的数据。
在获取到data.news数组后，一个常见的需求是遍历这个数组，为每个新闻项生成对应的HTML结构，并将其插入到页面的指定容器中。然而，如果不正确地处理，可能会导致只有最后一个新闻标题被显示。
立即学习“Java免费学习笔记（深入）”；
考虑以下这种常见的错误实现方式：
// 错误的实现方式示例
function getDataWrong() {
fetch('https://api.coinstats.app/public/v1/news?skip=0&limit=10')
.then(response => response.json())
.then(data => {
let newsHtmlContent = ''; // 初始化一个空字符串
// 遍历新闻数组，每次都重新赋值给 newsHtmlContent
data.news.map((newsItem) => {
newsHtmlContent = `
<div class="news-item">
<div class="title">Marketplace</div>
<h2>Live News</h2>
<p><span class='highlight'>News Article</span></p>
<p>${newsItem.title}</p>
</div>
`;
});
// 循环结束后，newsHtmlContent 只包含最后一个新闻项的HTML
document.getElementById('insert-news').innerHTML = newsHtmlContent;
})
.catch(error => console.error('Error:', error));
}
// getDataWrong(); // 不要运行此函数，因为它会产生错误结果问题分析： 在上述代码中，newsHtmlContent 变量在map方法的回调函数内部被反复地重新赋值。这意味着，每一次迭代都会覆盖上一次迭代生成的内容。当map循环结束后，newsHtmlContent中最终只会保留data.news数组中最后一个元素对应的HTML字符串。因此，当将其赋值给innerHTML时，页面上只会显示最后一个新闻标题。
为了正确地渲染所有新闻标题，我们需要一种方式来累积所有生成的HTML字符串，而不是每次都覆盖它们。Array.prototype.map() 方法非常适合将数组中的每个元素转换为新的形式（例如，HTML字符串），而Array.prototype.join() 方法则能将这些新的形式（HTML字符串数组）连接成一个单一的字符串。
以下是正确实现动态渲染新闻列表的代码：
function getDataCorrect() {
fetch('https://api.coinstats.app/public/v1/news?skip=0&limit=10')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
// 使用map方法将每个新闻项转换为一个HTML字符串
const newsHtmlArray = data.news.map((newsItem) => `
<div class="news-item">
<div class="title">Marketplace</div>
<h2>Live News</h2>
<p><span class='highlight'>News Article</span></p>
<p>${newsItem.title}</p>
</div>
`);
// 使用join('')方法将所有HTML字符串连接成一个大的字符串
const fullHtmlContent = newsHtmlArray.join('');
// 将完整的HTML内容一次性插入到DOM中
document.getElementById('insert-news').innerHTML = fullHtmlContent;
})
.catch(error => {
console.error('获取数据失败:', error);
document.getElementById('insert-news').innerHTML = '<p>加载新闻失败，请稍后再试。</p>';
});
}
getDataCorrect(); // 调用正确的函数代码解析：
为了更好地理解，以下是一个包含HTML结构和JavaScript代码的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态新闻列表</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
.box { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
.box .title { font-size: 1.2em; font-weight: bold; color: #333; margin-bottom: 10px; }
.box h2 { color: #0056b3; margin-top: 0; }
.box p { margin: 5px 0; line-height: 1.5; }
.highlight { background-color: #e0f7fa; padding: 2px 5px; border-radius: 3px; color: #00796b; font-weight: bold; }
.news-item { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
.news-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
</style>
</head>
<body>
<div class="box" id="insert-news">
<div class="title">Marketplace</div>
<h2>Live News</h2>
<p>正在加载新闻...</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
function fetchAndRenderNews() {
fetch('https://api.coinstats.app/public/v1/news?skip=0&limit=10')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.news && data.news.length > 0) {
const newsHtmlContent = data.news.map(newsItem => `
<div class="news-item">
<div class="title">Marketplace</div>
<h2>Live News</h2>
<p><span class='highlight'>News Article</span></p>
<p>${newsItem.title}</p>
</div>
`).join('');
document.getElementById('insert-news').innerHTML = newsHtmlContent;
} else {
document.getElementById('insert-news').innerHTML = '<p>暂无新闻可显示。</p>';
}
})
.catch(error => {
console.error('获取新闻失败:', error);
document.getElementById('insert-news').innerHTML = '<p>加载新闻失败，请稍后再试。</p>';
});
}
fetchAndRenderNews();
});
</script>
</body>
</html>通过本教程，我们学习了如何利用JavaScript的Fetch API获取远程数据，并重点掌握了使用Array.prototype.map()和Array.prototype.join()组合来高效、正确地将数组数据动态渲染为HTML列表。理解map方法返回新数组的特性以及join方法连接数组元素的功能，是避免在循环中覆盖DOM内容、实现完整数据渲染的关键。同时，我们也探讨了在实际开发中需要考虑的错误处理、加载状态和安全性等最佳实践，以构建更健壮、用户友好的Web应用。
以上就是使用JavaScript和Fetch API动态渲染新闻列表：解决内容覆盖问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
830
收藏
