使用循环显示卡引导中的每个 json 数据答案

【问题标题】：display each of json data in card bootstrap with loop使用循环显示卡引导中的每个 json 数据
【发布时间】：2021-01-30 15:14:35
【问题描述】：

大家好，我在这里有点困惑。我有一个关于如何循环这段代码的问题，所以最终结果将是每个数据在卡片内独立显示（每个数据的 id 与@987654321 中的 url 不同） @)。这是代码：

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

【问题讨论】：

$(".card-header") 查找与该类匹配的第一个元素。由于在每个循环中，它都会找到相同的元素（如果存在），因此它可能不是正确的做法..

标签： javascript html jquery ajax loops

【解决方案1】：

您可以使用.clone() 克隆容器内的 div，然后使用它您可以在 克隆的 html 中添加值并将其附加到容器中。

演示代码：

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

【讨论】：

非常感谢您的帮助，它就像我想象的那样工作得很好！
很高兴我提供了帮助 :) 您可以通过单击勾选符号将此答案标记为已接受。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您还可以使用 append 在 .each 循环中添加动态 DOM。

我已经为你添加了工作 sn-p。

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

【讨论】：