display each of json data in card bootstrap with loop

Hello guys i’m a bit confused here.I have a question about how to loop this code so in the end result will be each data displayed stand-alone inside card ( each data have different id from the url in https://jsonplaceholder.typicode.com/posts ). Here is the code :

html

<div class="container">
    <div class="card bg-warning">
        <!-- put item.userId & item.id below this -->
        <div class="card-header"></div>

        <div class="card-body">
            <!-- put item.title below this -->
            <h5 class="card-title"></h5>
            <!-- put item.body below this -->
            <p class="card-text"></p>
        </div>
    </div>
</div>

js

    $(function () {
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts",
            success: function (result) {
                $.each(result, function (index, item) {
                    var userId = item.userId;
                    var typeId = item.id;
                    var titleId = item.title;
                    var bodyId = item.body;
                    var $head = $(".card-header").html("user id: " + userId + " - " + "id: " + typeId);
                    var $title = $(".card-title").html(titleId);
                    var $text = $(".card-text").html(bodyId);
                });
                // console.log('success', result);
                // console.log(result[0].body);
                // console.log($(result).length);
            }
        });
    });

113 thoughts on “display each of json data in card bootstrap with loop”

  1. My brother recommended I might like this blog. He was once totally right. This post truly made my day. You cann’t consider simply how a lot time I had spent for this info! Thank you!

    Reply

Leave a Comment