отображать данные JSON в загрузочную карту с помощью JQuery

Question

Я пытаюсь отобразить данные 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

Думаю, проблема в итерации, вы должны использовать $ .each, но если вы хотите придерживаться for, сделайте следующее:

uimg=data.image[i];

Answer 2

У вас есть 2 проблемы

1. id="userimg" идентификатор может быть только один для одного элемента
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>