Несколько изображений в загрузочной таблице от Ajax Response - PullRequest
Новая
       19

Несколько изображений в загрузочной таблице от Ajax Response

0 голосов
/ 25 марта 2019

Я получаю ответ от ajax-вызова, и мне нужно создать загрузочную таблицу из него.Внутри ответа находится массив с некоторыми данными для изображений (путь, имя и т. Д.).Я пытаюсь передать данные ответа в таблицу начальной загрузки.Все данные в порядке, кроме изображений из массива, так как я получаю только одно значение, и поэтому отображается только один файл.

Моя функция / Ajax Call: 

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+'" />';
    }

Это данные, которые я получаю: 

{
   "_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
}

Это приводит к одному изображению в столбце «Фото»: 

<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>

Если я не использую средство форматирования, которое я вижу: 

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

Вопрос в том, как получить все изображения в столбце / строке таблицы и позволить imageFormatter создать строку источника изображения?

Ответы [ 2 ]

0 голосов
/ 25 марта 2019

Я заканчиваю: 

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

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

            var faengeTableData = [];

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

                    var picinfos = item.picinfos;
                    var fileNames = [];

                    for(var k=0; k < picinfos.length; k++){
                        var filestring = imageFormatter(picinfos[k].filename);
                        fileNames.push(filestring);
                    }

                    faengeTableData.push({
                        _id: item._id,
                        date: item.datum,
                        time: item.uhrzeit,
                        pics: fileNames,        
                        });
                }

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

            }   
    })
}

    function imageFormatter(value) {
        return '<img src="files/'+value+'">';
        }
0 голосов
/ 25 марта 2019 
for(var x in picinfos){
    var filename = picinfos[x].filename;
}

Ваш цикл for заменяет имя файла каждый раз, когда вы перебираете список picinfos. Вы должны добавить имена файлов в массив, а затем передать их в таблицу. 

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
 }
...