使用jQuery在引導卡中顯示JSON數據

Question

我正在嘗試使用for循環在bootstrap卡中顯示包含圖像數組和para的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數據/段落。

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> 

Answer 2

我猜問題出在迭代中，您應該使用$ .each，但是如果您堅持使用for，請執行以下操作：

uimg=data.image[i];