javascript - 使用 jquery 在引导卡中显示 json 数据

Question

我正在尝试使用 for 循环在 Bootstrap 卡中显示包含图像数组和参数的 Json 数据，它显示卡但仅在一张卡中显示图像，但有五张卡。

Json文件内容:

[{"image" : "abc.png" , "para" : "Hi..iam rohit.and this 1st card"},{"image" : "sqr.png", "para" : "Hi..iam rakesh.and this 2st card"},{...},{....}...]

卡片显示在:

<div class="row" id="printcard">  

</div> 

关联的 Ajax.js:

var vimg;
var html ='<div class="col-md-12">';
             html +='<div class="card">';
             html +='<div class="row">';
             html +='<div class="col-md-4" id="userimg"> </div>';
             html +='<div class="col-md-8 px-3">';
             html +='<div class="card-block px-3">';
             html +='<h4 class="card-title">sometitle</h4>';
             html +='</div>';
             html +='</div>';
             html +='</div>';
             html +='</div>';
             html +='</div>';    

$(document).ready(function(){   
    $.ajax({ 
    type: 'GET', 
    url: 'http://localhost:8080/demo/Json', 
    dataType: 'json',
    success: function (data) {    /* Here data length is 5*/

         for(var i=0;i<data.length;i++){
             $('#printcard').append(html);

            uimg=data[i].image;

            var $img = $("<img/>");
            $img.width('340px');
            $img.height('220px');
            $img.attr("src", "data:image/png;base64," + uimg);
            $("#userimg").append($img);
         }

    }
});
});

当我运行这个例子时，它显示了 5 张卡片，但只有第一张卡片有图像。我该如何解决这个问题以及如何在每张卡片中打印 Json 数据/Para。

Answer 1

你有两个问题

1. id="userimg" 一个元素id只能是一个
2. $("#userimg").append($img); 这将只选择第一个

所以改变这两件事

 html +='<div class="col-md-4" id="userimg"> </div>'

到

html +='<div class="col-md-4 userimg" > </div>'

和

$("#userimg").append($img);

到

$(".userimg:eq("+i+")").append($img);

var vimg;
var data=[{"image" : "abc.png" , "para" : "Hi..iam rohit.and this 1st card"},{"image" : "sqr.png", "para" : "Hi..iam rakesh.and this 2st card"}]
var html = '<div class="col-md-12">';
html += '<div class="card">';
html += '<div class="row">';
html += '<div class="col-md-4 userimg"> </div>';
html += '<div class="col-md-8 px-3">';
html += '<div class="card-block px-3">';
html += '<h4 class="card-title">sometitle</h4>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';

for (var i = 0; i < data.length; i++) {
  $('#printcard').append(html);

  uimg = data[i].image;

  var $img = $("<img/>");
  $img.width('340px');
  $img.height('220px');
  $img.attr("src", "data:image/png;base64," + uimg);
  $(".userimg:eq("+i+")").append($img);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="printcard">  

</div>