如何将TMDB API获取的JSON数据渲染为指定结构的HTML内容

实现方案 #

1. 给HTML元素添加唯一标识 #

先给需要填充内容的两个div加id属性，方便JS定位目标节点：

<div id="movie-title">title outputs here</div>
<div id="movie-overview">overview outputs here</div>

2. 修改Fetch请求逻辑完成内容渲染 #

在原有打印日志的逻辑基础上，增加DOM操作逻辑即可：

fetch('https://api.themoviedb.org/3/movie/778?api_key=1234&append_to_response=videos,credits')
    .then(res => {
        // 校验请求状态，避免接口异常返回错误结构导致后续逻辑报错
        if (!res.ok) throw new Error(`接口请求失败，状态码：${res.status}`)
        return res.json()
    })
    .then((out) => {
        console.log('接口返回数据：', out);
        // 获取两个目标DOM节点
        const titleEle = document.getElementById('movie-title')
        const overviewEle = document.getElementById('movie-overview')
        // 填充对应字段内容
        if (titleEle) titleEle.textContent = out.original_title
        if (overviewEle) overviewEle.textContent = out.overview
    })
    .catch(err => {
        console.error('请求出错：', err);
        // 可选：请求失败时给用户提示
        const titleEle = document.getElementById('movie-title')
        if (titleEle) titleEle.textContent = '影片数据加载失败'
    });

注意点 #

• 要保证JS代码的执行时机晚于对应DOM元素的渲染，你可以把JS代码放在页面</body>闭合标签之前，或者监听DOMContentLoaded事件触发后再执行请求逻辑，否则会出现找不到DOM元素的问题
• 请将代码中的示例API Key 1234替换为你自己的有效TMDB密钥，否则接口会返回401权限错误

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