How do I use $.each to display multiple nested elements from the same JSON object?

Question

I'm using the Trello API to create a dashboard of user stories and checklist items for a client. Here's the relevant code:

Trello.get("boards/z6yBuVol/cards", function(cards) {
        $cards.empty();
        $.each(cards, function(ix, card) {
            $("<li>", {
                class: "card", 
                text: card.name
            }).appendTo($cards) 

            $("<p>", {
                text: card.badges.checkItems
            }).appendTo("li");
        });
    });             

Instead of appending the checkItems to every list item, I want to append the checkItems to each related list item. So each list item (card.name) should have a checklist number (card.badges.checkItems) associated with it.

Thanks for any and all help. I'm a beginner.

Answer 1

    $.each(cards, function(ix, card) {
        var li = $("<li>", {
            class: "card", 
            text: card.name
        }).appendTo($cards); 

        $("<p>", {
            text: card.badges.checkItems
        }).appendTo(li);
    });

Answer 2

Just do something like:

var li = $("<li>", {
    /* snip */

$("<p>", {
    /* snip */
}).appendTo(li);