Question posted in
You can find the official documentation here.

display each of json data in card bootstrap with loop – Jquery ajax

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);
            }
        });
    });
Tags:

4

Answers


  1. 0

    You can use .clone() to clone your div which is there inside your container then using this you can add value inside cloned html and append it to your container.

    Demo Code :

    $(function() {
  //hide first div or remove after append using `$(".card:first").remove()`
  $(".card:first").hide()
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    success: function(result) {
      $.each(result, function(index, item) {
        var cards = $(".card:first").clone() //clone first divs
        var userId = item.userId;
        var typeId = item.id;
        var titleId = item.title;
        var bodyId = item.body;
        //add values inside divs
        $(cards).find(".card-header").html("user id: " + userId + " - " + "id: " + typeId);
        $(cards).find(".card-title").html(titleId);
        $(cards).find(".card-text").html(bodyId);
        $(cards).show() //show cards
        $(cards).appendTo($(".container")) //append to container
      });
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(function () {
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts",
            success: function (result) {
                var htmlContent = '';
                $.each(result, function (index, item) {
                    var userId = item.userId;
                    var typeId = item.id;
                    var titleId = item.title;
                    var bodyId = item.body;
                    // Below is String Interpolation used in JS, where you can replace variables inside the string
                    htmlContent += `<div class="container">
    <div class="card bg-warning">
        <!-- put item.userId & item.id below this -->
        <div class="card-header">
          <span>${userId}<span>
          <span>${typeId}<span>
        </div>

        <div class="card-body">
            <!-- put item.title below this -->
            <h5 class="card-title">${titleId}</h5>
            <!-- put item.body below this -->
            <p class="card-text">${bodyId}</p>
        </div>
    </div>
</div>`;
                });

                 // htmlContent below contains your whole html
                 console.log('success', htmlContent);
            }
        });
    });
    
</script>
</head>
<body>

<p id="p1">This is a paragraph.</p>

</body>
</html>
    Login or Signup to reply.
  3. 0

    You can also use append to add dynamic DOM inside your .each loop.

    I have added working snippet for you.

    $(function () {
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts",
            success: function (result) {
                $.each(result, function (index, item) {
                    $(".container").append("<div class='card bg-warning'>User ID:"+item.userId +
                                                "<div class='card-header'>ID:"+item.id+"</div>" +
                                                "<div class='card-body'>" +
                                                    "<h5 class='card-title'>"+item.title+"</h5>" +
                                                    "<p class='card-text'>"+item.body+"</p>" +
                                                "</div>" +
                                            "</div>");
                });
            }
        });
    });
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container"></div>
    Login or Signup to reply.
  4. 0 
    $(function() {
  //hide first div or remove after append using `$(".card:first").remove()`
  $(".card:first").hide()
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    success: function(result) {
      $.each(result, function(index, item) {
        var cards = $(".card:first").clone() //clone first divs
        var userId = item.userId;
        var typeId = item.id;
        var titleId = item.title;
        var bodyId = item.body;
        //add values inside divs
        $(cards).find(".card-header").html("user id: " + userId + " - " + "id: " + typeId);
        $(cards).find(".card-title").html(titleId);
        $(cards).find(".card-text").html(bodyId);
        $(cards).show() //show cards
        $(cards).appendTo($(".container")) //append to container
      });
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search