如何将EJS中的数组传递到JavaScript实现轮播功能？

云原生阿岚

2026-7-3

解决方案

1. 修复EJS中数据传递的序列化问题

直接将数组赋值给data属性时，JS会把对象默认转为[object Object]字符串，导致前端无法解析。需要先把数组序列化为JSON字符串再传递：

<!-- 在index.ejs中 -->
<div id="movie-carousel" data-movies='<%= JSON.stringify(movies) %>'></div>

用单引号包裹序列化后的字符串，避免和JSON内部的双引号产生冲突。

2. 前端JS解析JSON数据

在scripts/index.js中，将获取到的JSON字符串转回数组：

const carousel = document.getElementById('movie-carousel');
// 解析data属性中的JSON字符串为数组
const movieList = JSON.parse(carousel.dataset.movies);

此时movieList就是完整的电影数据数组，可直接用于轮播逻辑。

3. 轮播逻辑示例

基于解析后的数组实现基础切换功能：

let currentIdx = 0;
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const movieInfo = document.getElementById('movie-info');

// 渲染当前电影信息
function renderCurrentMovie() {
  const movie = movieList[currentIdx];
  movieInfo.innerHTML = `
    <h3>${movie.title}</h3>
    <p>评分：${movie.rating}</p>
    <p>上映年份：${movie.year}</p>
  `;
}

// 上一页逻辑
prevBtn.addEventListener('click', () => {
  currentIdx = (currentIdx - 1 + movieList.length) % movieList.length;
  renderCurrentMovie();
});

// 下一页逻辑
nextBtn.addEventListener('click', () => {
  currentIdx = (currentIdx + 1) % movieList.length;
  renderCurrentMovie();
});

// 初始化渲染第一组数据
renderCurrentMovie();