javascript - 查询 : Iterate array of objects and append the value of object attribute to

Question

我有一组从 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每个评论。

我在网上看到过建议使用 for..in 和 object.getOwnProperty 的资源，但我还没有看到它像我这样用在数组上。

如有任何帮助，我们将不胜感激。

Answer 1

如果我正确理解你的问题，那么你可以通过一个 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)
    }

    })
  })
}