JQuery: Iterate array of objects and append the value of object attribute to <ul>

Question

I have an array of objects that are returned from a fetch() response. I sort them alphabetically and store the sorted array in sortedComments.

The comments have multiple keys, such as linkId, time_created, however I'm just trying to get the body out of each comment and append these to a comments_section div that I have in my view.

Below is my code:

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)
        })
      })
    }

The console.log(sortedComments) shows the array of comments alphabetized, but I don't know which function I need to iterate in the array and get the body of each comment.

I've seen resources online that suggest for..in and object.getOwnProperty but I haven't seen it used on arrays like the one I have.

Any help would be greatly appreciated.

Check sortedComments.forEach((idx, comment) => console.log(comment.body)) as one starting point. — Shidersz
– Shidersz, Commented Jan 30, 2019 at 19:40

Dacre Denny · Accepted Answer · 2019-01-30 19:49:01Z

1

If I understand your question correctly, then you can achieve this via a for .. of loop as shown:

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)
    }

    })
  })
}

edited Jan 30, 2019 at 19:49

answered Jan 30, 2019 at 19:43

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Over a year ago

Thanks @Dacre_Denny! It worked. The only thing I need to do is clear the existing comments list. I appreciate the help

Dacre Denny Over a year ago

@James you're welcome! If you want to clear the existing list before you append() to it, you can call $ul.empty() before the for loop :-)

Shidersz · Accepted Answer · 2019-01-30 19:55:25Z

1

For this particular case, and since JQuery::append() supports an array as the argument, I will use Array::map() on the sortedComments and then use this as the argument of the 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));
    });
});

Note that you can also map every comment to some html markup that fit your needs, example:

sortedComments.map(comment => "<li>" + comment.body + "</li>");

edited Jan 30, 2019 at 19:55

answered Jan 30, 2019 at 19:48

Shidersz

17.2k2 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

JQuery: Iterate array of objects and append the value of object attribute to <ul>

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related