时间戳

首页 > 解决方案 > 使用 jquery 在动态 div 中显示所有带有引导卡的 json 数据

javascript - 使用 jquery 在动态 div 中显示所有带有引导卡的 json 数据

问题描述

我仍然在这里学习 ajax、jquery 和 js。所以在这个问题中，我想获取 json 数据并将每个数据动态地显示到 div id="card-body" 中，但似乎我的代码不起作用，因为结果只显示一个包含所有数据的 div。是否有任何可以在此处的代码中添加或更改的建议？

<div class="container">
    <div class="card">
        <div class="card-header">
        </div>
        <div class="addDiv">
            <div id="card-body">
            </div>
        </div>
    </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>

        $(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 $info = $("<p/>").html("user id: " + userId + "<br>"
                            + "id: " + typeId + "<br>"
                            + "title: " + titleId + "<br>"
                            + "body: " + bodyId);

                        var html = '<div id="card-body>';

                        for (let i = 0; i < $(result).length; i++) {
                            const element = $(result)[i];
                        }

                            html += '</div>';

                            $(".addDiv").append(html);

                        $("div#card-body").append($info);
                    });
                    // console.log('success', result);
                    // console.log(result[0].body);
                    // console.log($(result).length);
                }
            });
        });
    </script>

标签： javascripthtmljqueryjsonajax

解决方案

for (let i = 0; i < $(result).length; i++) {
  const element = $(result)[i];
}

这里要做什么？

或者你的意思是这个？ - - 更新

$(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    success: function(result) {
      var container = $("div#list");
      $.each(result, function (index, item) {
        var userId = item.userId;
        var id = "card-body-" + userId;
        var el = $('div#' + id)
        console.log(el)
        var typeId = item.id;
        var titleId = item.title;
        var bodyId = item.body;
        var $info = $('<div>').html(
          "user id: " + userId + "<br>" +
          "id: " + typeId + "<br>" +
          "title: " + titleId + "<br>" +
          "body: " + bodyId
        );
        if (!el.length) {
          // not found, create new one
          el = $('<div id="' + id + '">')
          container.append(el)
        }
        el.append($info)
      });
    }
  });
});

推荐阅读