JS调用TMDb API时如何将genre数组中所有名称渲染到innerHTML中

你直接调用join()返回[object Object]是因为data.genres数组的每一项都是包含id和name属性的对象，不是字符串，直接对对象数组做拼接操作会默认调用对象的toString()方法，就会返回[object Object]。

解决方法 #

先用map()方法遍历数组，取出每一项的name属性，得到纯字符串组成的流派名称数组，再用join()拼接即可。你原来标记的那行代码替换成下面的内容就行：

<h6>${data.genres.map(genre => genre.name).join(' / ')}</h6>

你可以根据需求修改join()里的分隔符，比如换成逗号、顿号都可以。

优化建议 #

如果要兼容部分没有流派信息的特殊影片，可以加个兜底逻辑避免报错：

<h6>${data.genres?.map(genre => genre.name).join(' / ') || '暂无流派'}</h6>

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