JavaScript如何将fetch获取的接口数据动态填充渲染到HTML页面

第一步：添加卡片挂载容器 #

先把你HTML里写死的单张卡片代码移除，在原卡片所在位置添加一个空的容器，用来承载后续动态生成的所有卡片：

<!-- 卡片容器，和你原有Bootstrap栅格规则适配 -->
<div class="row" id="feedCardContainer"></div>

第二步：修改接口请求逻辑，完成数据填充 #

你原有接口请求已经能正常拿到数据，只需要在拿到数据的回调里，循环生成卡片HTML结构，把接口返回的mTitle/mDescription/mLink替换到对应位置，最后统一插入容器即可。
几个优化点提前说明：

• 不需要先把响应转成text再parseJSON，直接用response.json()即可
• 循环时增加数组长度判断，避免接口返回数据不足时抛出下标越界错误
• 用模板字符串拼接HTML对初学者更友好，逻辑和你写静态卡片完全一致

修改后的完整JS代码如下：

function mFeeds()
{
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Access-Control-Allow-Origin', 'https://mfeeder.herokuapp.com/feed');
    headers.append('Access-Control-Allow-Credentials', 'true');

    var requestOptions = {
        method: 'GET',
        redirect: 'follow',
        headers: headers
    };

    fetch("https://mfeeder.herokuapp.com/feed", requestOptions)
    .then(response => response.json()) // 直接转json，省去手动parse步骤
    .then(mResults => {
        // 获取提前放好的卡片容器
        const cardContainer = document.getElementById('feedCardContainer');
        // 先清空容器内容，避免重复渲染
        cardContainer.innerHTML = '';
        // 循环生成卡片，最多渲染7条，同时做数组长度兜底判断
        const renderCount = Math.min(7, mResults.feeds.length);
        for (let i = 0; i < renderCount; i++) {
            const mTitle = mResults.feeds[i].text;
            const mDescription = mResults.feeds[i].description;
            const mLink = mResults.feeds[i].link;

            // 复用你原有卡片模板，替换动态字段
            const cardHtml = `
            <div class="col p-5">
                <div class="card" style="width: 18rem;">
                    <!-- 暂时用你本地的默认封面，后续如果接口返回封面图字段直接替换src即可 -->
                    <img src="./img/connecting-to-go-of-elijah.jpg" class="card-img-top" alt="${mTitle}">
                    <div class="card-body">
                        <h5 class="card-title text-center">${mTitle}</h5>
                        <p class="card-text text-center">${mDescription}</p>
                        <div class="row">
                            <div class="col-lg-12 text-center">
                                <!-- WATCH SERMON按钮跳转地址替换为接口返回的mLink -->
                                <a href="${mLink}" class="btn btn-danger">WATCH SERMON</a>
                            </div>
                            <div class="col-lg-12 text-center pt-3">
                                <a href="${mLink}" ><img src="./img/film-solid.svg" width="10%" height="auto" class="p-1"/></a>
                                <a href="${mLink}" ><img src="./img/headphones-simple-solid.svg" width="10%" height="auto" class="p-1"/></a>
                                <a href="${mLink}" ><img src="./img/download-solid.svg" width="10%" height="auto" class="p-1"/></a>
                                <a href="${mLink}" ><img src="./img/book-solid.svg" width="10%" height="auto" class="p-1"/></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            `;
            // 把生成的单张卡片插入容器
            cardContainer.insertAdjacentHTML('beforeend', cardHtml);
        }
    })
    .catch(error => console.log('error', error));
}

// 页面加载完成后调用请求方法，否则函数不会自动执行
window.onload = function() {
    mFeeds();
}

注意事项 #

• 目前代码里封面图沿用了你本地的静态图片，如果后续接口返回封面图字段，只需要把img标签的src属性替换成对应字段值即可
• 代码里已经把所有跳转链接默认绑定为接口返回的mLink，如果你需要给视频、音频、下载、文档按钮绑定不同地址，等接口返回对应字段后替换对应a标签的href属性即可
• 如果你需要调整卡片渲染数量，直接修改循环里的最大数值即可，当前代码默认最多渲染7条

目标效果预览：

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