CODEWITHSUNDEEP
javascripthtmljqueryajaxloops
Dave Christion
Dave Christion

Reputation: 91

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

Upvotes: 1

Views: 6045

Answers (4)

Laiba
Laiba

Reputation: 1

$(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>

Upvotes: 0

Akshit Aggarwal
Akshit Aggarwal

Reputation: 51

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>

Upvotes: 1

Yogesh G
Yogesh G

Reputation: 1160

<!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>

Upvotes: 1

Swati
Swati

Reputation: 28522

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>

Upvotes: 5

Related Questions