Question posted in
You can find the official documentation here.

Load list objects in ajax response and create dynmic list divs with this data – Jquery ajax

I have this part of HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{title}</h4>
                    <p class="card-text">{content}</p>
                    <a href="#" class="card-link">Read...</a>
                </div>
            </div>
        </div>
    </div>
</div>

and I have ajax request which calls after page loading:

<script>
    $(window).on('load', function () {
        loadArticles();
    });

    function loadArticles() {
        $.ajax({
            dataType: "json",
            url: "/articles", success: function (result) {

            }
        });
    }
</script>

I need to create list of cards(<div class="card">) with data from response. For example, I get 5 articles in response. I need to create 5 card divs and fill its data from the response. How can I do it?

Tags:

2

Answers


  1. 0

    Loop over the objects you get back from the ajax call and use the jQuery .append() function to add them to the dom.

    First, you need to add an identifying class (or id) to the parent div in your HTML and remove the card HTML:

    <div class="container">
    <div class="row">
        <div class="col-sm-4 cards-wrapper"></div>
    </div>
</div>

    Then in your loadArticles function loop over your ajax response and append to that jQuery selected we just defined – ‘.cards-wrapper’:

    function loadArticles() {
    $.ajax({
        dataType: "json",
        url: "/articles",
        }).done(function(data) {
            const cards = data.body.cards; // Or however you need to traverse the response object
            cards.forEach(function(card) {
                $('.cards-wrapper').append('<div class="card"><div class="card-body"><h4 class="card-title">' + card.title + '</h4><p class="card-text">' + card.content + '</p><a href="#" class="card-link">Read...</a></div></div>');
            }) 
        });
}

    Ideally you should extract out that append code into its own function for readability, etc.

    Login or Signup to reply.
  2. 0

    You can do it by simply using html template

    HTML

    First you need to add card-container id to the HTMl tag in which we will inject HTMl using ajax 

    <div class="container">
    <div class="row">
        <div class="col-sm-4" id="card-container">
        </div>
    </div>
</div>

    Javascript

    <script>
    $(window).on('load', function () {
        loadArticles();
    });

    function loadArticles() {
        $.ajax({
            dataType: "json",
            url: "/articles", success: function (result) {
             //Get template html using ajax and append it with **card-container** 
             var cardTemplate = $("#cardTemplate").html();
             result.forEach(function (card) {           

                    $('#card-container').append(cardTemplate.replace("{title}", 
                      card.title).replace("{content}", card.content));
             })
            }
        });
    }
</script>

    HTML Template

    Assign id cardTemplate to html template

    <template id="cardTemplate">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">{title}</h4>
            <p class="card-text">{content}</p>
            <a href="#" class="card-link">Read...</a>
        </div>
    </div>
</template>

    I have also implemented on my end so it will surely gonna work !!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search