javascript - display each of json data in card bootstrap with loop - Stack Overflow

admin管理员组

文章数量:1399929

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 ). 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: ";,
            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);
            }
        });
    });

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

• javascript
• html
• jquery
• ajax
• loops

Share Improve this question Follow asked Jan 30, 2021 at 15:14 Dave ChristionDave Christion 9133 silver badges1313 bronze badges 1

• $(".card-header") Finds the first matching element with the class. Since in each loop, it will find the same element(if it exists), Hence it may not be the right thing to do.. – Yogesh G Commented Jan 30, 2021 at 15:31

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(function () {
        $.ajax({
            url: "https://jsonplaceholder.typicode./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>

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./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./jquery-3.3.1.min.js"></script>
<div class="container"></div>

$(function() {
  //hide first div or remove after append using `$(".card:first").remove()`
  $(".card:first").hide()
  $.ajax({
    url: "https://jsonplaceholder.typicode./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

本文标签： javascriptdisplay each of json data in card bootstrap with loopStack Overflow