Multiple Images in bootstrap-table from Ajax Response

Question

i receive response from a ajax call and i need create a bootstrap-table from it. Inside the response is an array with some data for images (path, name, etc.). I try to give the response data to the bootstrap-table. All data is fine except the images from the array as i only get a single value and therefore only a single file is displayed.

My Function / Ajax Call is:

function printCatchTable(){
var $table = $('#TableLastCaught');

$.ajax({
type: "GET",
url: '/api/lastcaught',
success: function(response) {

for(var i =0;i < response.length ;i++){
var item = response[i];
var picinfos = item.picinfos;

for(var x in picinfos){
var filename = picinfos[x].filename;
}

faengeTableData.push({
_id: item._id,
date: item.datum,
time: item.uhrzeit,
pics: filename,
}

$table.bootstrapTable({data: faengeTableData});
$table.bootstrapTable('togglePagination');
}   
})
} 

function imageFormatter(value, row) {
    return '<img src="files/'+value+'" />';
    }

This is the data i receive:

{
   "_id":"5c81253a4a582827f09969a7",
   "date":"2019-03-07",
   "time":"10:11",
   "picinfos":[
      {
         "filepath":"/files/1551967546627.jpg",
         "mimetype":"image/jpeg",
         "filename":"1551967546627.jpg",
         "size":322289,
         "metadata":{
            "GPSLat":"",
            "GPSLon":"",
            "CreateDate":"",
            "CreateTime":""
         }
      },
      {
         "filepath":"/files/1551967546634.jpg",
         "mimetype":"image/jpeg",
         "filename":"1551967546634.jpg",
         "size":275692,
         "metadata":{
            "GPSLat":"",
            "GPSLon":"",
            "CreateDate":"",
            "CreateTime":""
         }
      },
      {
         "filepath":"/files/1551967546638.jpg",
         "mimetype":"image/jpeg",
         "filename":"1551967546638.jpg",
         "size":261305,
         "metadata":{
            "GPSLat":"",
            "GPSLon":"",
            "CreateDate":"",
            "CreateTime":""
         }
      }
   ],
   "userid":"5c09116a4e2d1f1cc9d48d6a",
   "__v":0
}

This results in one single picture under the column "Pics":

<th data-field="bilder" data-sortable="false" data-formatter="imageFormatter">Pics</th>

<tr id="5c8a196cc7b15419d5755153" data-index="1">
<td style="">2019-03-14</td>
<td style="">6:15:19</td>
<td style=""><img src="files/1552554348794.jpg"></td>
</tr>

If i dont use the formatter i see:

<tr id="5c8a196cc7b15419d5755153" data-index="1">
<td style="">2019-03-14</td><td style="">6:15:19</td>
<td style="">1552554348794.jpg</td>
</tr>

Question is how to get all images to the table column/row and let imageFormatter build the image source string?

Answer 1

for(var x in picinfos){
    var filename = picinfos[x].filename;
}

Your for loop is replacing the filename everytime you iterate through the picinfos list. You should append the filenames to an array and then pass them to the table.

for(var x=0; x < res.length; x++){
  var item = res[x]
  var picInfos = item.picinfos
  var fileNames = []

  for(var i=0; i < picInfos.length; i++){
    fileNames.push(picInfos[i].filename)
  }

   //rest
 }