如何使用循环简化访问JSON数据的重复代码，实现前端页面数据批量渲染？

实现方案 #

你可以通过遍历showtrend.tv_results数组的方式批量处理所有剧集数据，核心逻辑是利用数组下标和DOM ID序号的对应关系拼接元素ID，具体实现如下：

基础for循环版本（兼容性最好） #

// 遍历所有剧集数据，数组有多少项就循环多少次
for (let i = 0; i < showtrend.tv_results.length; i++) {
  // 数组下标从0开始，DOM ID的序号从1开始，所以要+1
  const serialNum = i + 1;
  const currentItem = showtrend.tv_results[i];
  // 批量赋值三个字段
  document.getElementById(`Serie${serialNum}`).textContent = currentItem.title;
  document.getElementById(`Serie${serialNum}ID`).textContent = `https://www.imdb.com/title/${currentItem.imdb_id}`;
  document.getElementById(`Serie${serialNum}Year`).textContent = currentItem.year;
}

如果运行环境不支持模板字符串，也可以用字符串拼接的方式写ID：

document.getElementById('Serie' + serialNum).textContent = currentItem.title;

forEach版本（写法更简洁） #

showtrend.tv_results.forEach((item, index) => {
  const serialNum = index + 1;
  document.getElementById(`Serie${serialNum}`).textContent = item.title;
  document.getElementById(`Serie${serialNum}ID`).textContent = `https://www.imdb.com/title/${item.imdb_id}`;
  document.getElementById(`Serie${serialNum}Year`).textContent = item.year;
})

额外优化建议 #

如果后续还要加更多字段的话，可以把要匹配的字段和ID后缀提前存在配置里，后续加字段只需要改配置就行，不用重复写赋值逻辑：

const fieldConfig = [
  { suffix: '', key: 'title' },
  { suffix: 'ID', key: 'imdb_id', prefix: 'https://www.imdb.com/title/' },
  { suffix: 'Year', key: 'year' }
]

showtrend.tv_results.forEach((item, index) => {
  const serialNum = index + 1;
  fieldConfig.forEach(config => {
    const value = config.prefix ? config.prefix + item[config.key] : item[config.key];
    document.getElementById(`Serie${serialNum}${config.suffix}`).textContent = value;
  })
})

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