迭代仅输出 JSON 数组的最后一个元素而不是所有数组

玛丽克斯红

编辑 - 我很抱歉,不知道这是发布代码照片的问题。替换为真实代码。

我有一个使用 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将所有数据保存到json文件中,但仅获取最后一个索引

如何仅返回数组的最后一个元素而不获取所有元素

Swift-为什么我的JSON对象元素仅添加最后一个数组元素?

jQuery .json中的JSON数组,当使用.append时,仅显示数组的最后一个值

从JSON对象数组中仅获取一个元素

JSON输出仅显示最后一个结果

JSON.parse仅给出最后一个元素作为输出

我不能通过带有Cakephp集合的Json来提取“仅”最后一个数组

只有数组的第一个元素已输出到谷歌表,我需要输出所有元素(空/未定义元素除外)

foreach仅迭代数组的最后一个条目

删除所有数字索引以仅具有一个assoc数组

JSON仅打印数组中的最后一个对象

获取json数组中元素的最后一个索引

foreach循环仅输出数组中的最后一个元素

如何将所有数据附加到 dict 而不是仅最后一个结果?

仅获取数组猫鼬的最后一个元素

仅保存C数组的最后一个元素

在json数组中输出一个Json Array

JSON模式报告错误仅针对数组的第一个元素

如何在 ReactJs 中仅打印 JSON 数组中的第一个元素?

Json模式仅验证数组中的第一个元素

没有数组的另一个数组中的Android JSON解析数组

C ++ Poco-如何迭代一个JSON数组?

卷曲JSON仅输出一个对象

如何合并多个JSON数组,这是另一个JSON数组对其所有元素进行更新的结果?

在解析具有 anyOf 属性下的多个引用的 json 模式时,输出中仅返回一个引用(最后一个)

json转换器仅使用最后一个字典的最后一个键值,而不是全部

当子数组仅包含一个具有数字索引的元素时,php 会展平到父级

Postgres / JSON-更新所有数组元素