Displaying Various Photos within bootstrap-table using Ajax Response

Question

Displaying Various Photos within bootstrap-table using Ajax Response

Upon receiving a response from an AJAX call, my task is to create a bootstrap-table with the data. The response contains an array with information about images, such as their paths and names. However, when trying to populate the bootstrap-table with this data, only a single image is displayed instead of all the images in the array.

Here is my function and 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+'" />';
    }

This is the data received:

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

Currently, only one picture is displayed under the "Pics" column:

<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 don't 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>

The question remains: how can I display all the images in the table column/row and have the imageFormatter construct the image source string?

javascript ajax bootstrap-table

Answer 1

Answer №1

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

Instead of replacing the filename in each iteration of the for loop, you should store the filenames in an array and then pass it to the table.

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

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

   //rest
 }

Answer 2

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

Instead of replacing the filename in each iteration of the for loop, you should store the filenames in an array and then pass it to the table.

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

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

   //rest
 }

Answer 3

Answer №2

My conclusion is:

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

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

            var catchTableData = [];

            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 = formatImage(picinfos[k].filename);
                    fileNames.push(filestring);
                }

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

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

        }   
    })
}

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

Answer 4

My conclusion is:

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

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

            var catchTableData = [];

            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 = formatImage(picinfos[k].filename);
                    fileNames.push(filestring);
                }

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

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

        }   
    })
}

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

Displaying Various Photos within bootstrap-table using Ajax Response

Answer №1

Answer №2

Similar questions

Identify the page search function to reveal hidden content in a collapsible section

In a responsive design, rearrange a 3-column layout so that the 3rd column is shifted onto or above the

Retrieve selected value from HTML input with datalist and use it as an argument in a method

Failure of Angular to execute HTTP calls asynchronously

ASP.NET page experiences issues with executing Javascript or jQuery code

JavaScript, PHP handlers, and CommentBox all work together seamlessly to create

Sorting a datatable in JSF 2 using Ajax when a select list item is selected and a button is clicked

Check the status of the audio source URL using JavaScript

Exploring the concept of recursive method calls in TypeScript

The loader image does not appear on mobile screens during an AJAX call, but it functions correctly on desktop screens

Converting Ajax Request Headers from UTF-8 to ISO Character Set

Error: Javascript unable to generate video thumbnail using ffmpeg

Sorting a list based on user-defined criteria in Ionic 3

Create a React Native layout with a set width and the ability to stretch to fill

Steps to display JSONP response delivered by PHP on a web page

Tips for obtaining the current date in the head of a Next.js application

Encountering a 403 error message while using cljs-ajax for

Concentrating on div elements using React

Issue with toggleClass not functioning properly after receiving data from an AJAX call

Creating a sliding menu using React and Headless UI (with Tailwind CSS)