JQuery: итерация массива объектов и добавление значения атрибута объекта к <ul> - PullRequest
Новая
       6

JQuery: итерация массива объектов и добавление значения атрибута объекта к <ul>

0 голосов
/ 30 января 2019

У меня есть массив объектов, которые возвращаются из ответа fetch().Я сортирую их по алфавиту и сохраняю отсортированный массив в sortedComments.

Комментарии имеют несколько ключей, таких как linkId, time_created, однако я просто пытаюсь получить body из каждого комментария и добавить их в comments_section div, который у меня естьна мой взгляд.

Ниже мой код: 

function sortComments() {
$("#sort_comments").on("click", function (e) {
    e.preventDefault();
    var buttonData = document.getElementById("sort_comments").dataset.linkid

    fetch(`/links/${buttonData}/comments.json`)
      .then(r => r.json())
      .then(comments => {
        const sortedComments = comments.sort(({body: a}, {body: b}) => a.localeCompare(b))
        console.log(sortedComments) 
        var $ul = $("div.comments_section ul")
        $ul.append(sortedComments.body)
        })
      })
    }

console.log(sortedComments) показывает массив комментариев в алфавитном порядке, но я не знаю, какую функцию мне нужно перебрать в массивеи получить body каждого comment.

Я видел в Интернете ресурсы, предлагающие for..in и object.getOwnProperty, но я не видел, чтобы он использовался в массивах, подобных тому, что у меня есть.

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Для этого конкретного случая, и поскольку JQuery :: append () поддерживает массив в качестве аргумента, я буду использовать Array :: map () для sortedComments изатем используйте это как аргумент append(). 

fetch(`/links/${buttonData}/comments.json`)
    .then(r => r.json())
    .then(comments =>
    {
        const sortedComments = comments.sort(
            ({body: a}, {body: b}) => a.localeCompare(b)
        );
        var $ul = $("div.comments_section ul");
        $ul.append(sortedComments.map(comment => comment.body));
    });
});

Обратите внимание, что вы также можете сопоставить каждый комментарий с некоторой разметкой html, которая соответствует вашим потребностям, например: 

sortedComments.map(comment => "<li>" + comment.body + "</li>");
0 голосов
/ 30 января 2019

Если я правильно понимаю ваш вопрос, то вы можете добиться этого с помощью цикла for .. of, как показано: 

fetch(`/links/${buttonData}/comments.json`)
  .then(r => r.json())
  .then(comments => {
    const sortedComments = comments.sort(({body: a}, {body: b}) => a.localeCompare(b))

    var $ul = $("div.comments_section ul")

    /*
    Use For .. of loop to iterate comment value objects of 
    sortedComments array
    */
    for(const comment of sortedComments) {
        /*
        Create li element for this comment body text for use in the
        list
        */            
        var $li = $('<li>');
        $li.text(comment.body);

        /*
        Append li element for this comment body text to the $ul
        */
        $ul.append($li)
    }

    })
  })
}
...