JavaScript fetch获取接口JSON数据后如何在HTML渲染指定overview字段

现有代码无法正常展示overview字段的核心原因有两点：

• data.results是接口返回的电影列表，属于数组类型，直接把整个数组赋值给DOM元素的innerText时，JS会默认将对象转换为[object Object]格式的无意义字符串，无法展示内部存储的字段内容
• 代码没有指定要访问的数组元素索引，也没有明确读取目标字段overview

根据需求分两种场景处理：

场景1：只展示第一条搜索结果的overview #

直接取数组索引为0的第一个元素，读取其overview属性赋值即可，修正后代码如下：

<script>
fetch("https://api.themoviedb.org/3/search/movie?api_key=myapi&language=fr-FR&query=The%20Social%20&page=1&include_adult=false&year=2010")
    .then(res => res.json())
    .then(data => {
        // 读取第一条结果的overview字段
        document.querySelector(".movies").innerText = data.results[0].overview;
    })
    // 增加错误捕获，方便排查请求异常、字段缺失问题
    .catch(err => console.error("接口请求异常:", err))
</script>

场景2：展示所有搜索返回结果的overview #

遍历data.results数组，逐个提取每个电影的overview插入到页面容器中：

<script>
fetch("https://api.themoviedb.org/3/search/movie?api_key=myapi&language=fr-FR&query=The%20Social%20&page=1&include_adult=false&year=2010")
    .then(res => res.json())
    .then(data => {
        const container = document.querySelector(".movies");
        container.innerHTML = "";
        // 遍历所有结果生成内容
        data.results.forEach(movie => {
            const descEl = document.createElement("p");
            descEl.innerText = movie.overview;
            container.appendChild(descEl);
        })
    })
    .catch(err => console.error("接口请求异常:", err))
</script>

• 不要直接将对象、数组这类引用类型值直接赋值给innerText，必须先提取出要展示的基础类型（字符串、数字）内容
• 访问数组结构的返回值时，必须先通过下标拿到具体的对象元素，再读取对象上的目标属性
• 给fetch请求增加catch逻辑，可以快速定位接口报错、字段不存在、跨域等常见问题

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