编辑 - 我很抱歉,不知道这是发布代码照片的问题。替换为真实代码。
我有一个使用 forEach 的嵌套循环,它按设计工作,除了当它到达 JSON 名称引用中的数组时,它只输出该数组的最后一个元素。
为什么只输出最后一个元素而不是完整数组或至少输出第一个元素?最后一个元素让我有点困惑。我想要做的是迭代并输出电影标题,然后输出电影的所有引用。现在它输出 1 并且它是数组的最后一个元素。
顺便说一句,我知道这些是电影的引述,哈哈。我正在使用 faker gem 来生成随机引号。
function renderMovies(movies) {
movies.data.forEach(movie => {
//Tag creations
const movieUL = document.querySelector('#movie-list');
const movieLi = document.createElement('li');
const blockQuote = document.createElement('blockquote');
const p = document.createElement('p');
const footer = document.createElement('footer');
const br = document.createElement('br');
const hr = document.createElement('hr');
const deleteBtn = document.createElement('button');
//Assigning
movieLi.className = 'movie-card';
blockQuote.className = 'blockquote';
p.className = 'mb-0';
footer.className = 'blockquote-footer';
movieLi.dataset.id = movie.id
p.innerHTML = movie.attributes.title;
movie.attributes.quotes.forEach(x => {
console.log(x.sentence);
footer.innerHTML = x.sentence;
})
//DOM actions
movieLi.append(p, footer, br, deleteBtn, hr);
movieLi.append(blockQuote);
movieUL.append(movieLi);
deleteBtn.innerHTML = 'Delete';
deleteBtn.className = 'btn-danger';
deleteBtn.addEventListener('click', () => deleteMovie())
function deleteMovie() {
return fetch(`http://localhost:3000/movies/${movie.id}`, {
method: 'DELETE'
})
.then(movieLi.remove())
}
})
}
您需要运行一个循环来创建页脚标签列表并将它们添加到 DOM。这是代码:
function renderMovies(movies) {
movies.data.forEach(movie => {
//Tag creations
const movieUL = document.querySelector('#movie-list');
const movieLi = document.createElement('li');
const blockQuote = document.createElement('blockquote');
const p = document.createElement('p');
let footerList = [];
const br = document.createElement('br');
const hr = document.createElement('hr');
const deleteBtn = document.createElement('button');
//Assigning
movieLi.className = 'movie-card';
blockQuote.className = 'blockquote';
p.className = 'mb-0';
movieLi.dataset.id = movie.id
p.innerHTML = movie.attributes.title;
movie.attributes.quotes.forEach(x => {
console.log(x.sentence);
let footer = document.createElement('footer');
footer.innerHTML = x.sentence;
footer.className = 'blockquote-footer';
footerList.push(footer);
})
//DOM actions
movieLi.append(p);
footerList.forEach(el => {
movieLi.append(el);
});
movieLi.append(br, deleteBtn, hr);
movieLi.append(blockQuote);
movieUL.append(movieLi);
deleteBtn.innerHTML = 'Delete';
deleteBtn.className = 'btn-danger';
deleteBtn.addEventListener('click', () => deleteMovie())
function deleteMovie() {
return fetch(`http://localhost:3000/movies/${movie.id}`, {
method: 'DELETE'
})
.then(movieLi.remove())
}
})
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句