How to show the images from JSON data using jQuery?

Question

I want to show the images from the JSON data into the first row, first column. What I can use to get the images before this column (data[key].description)

$(document).ready(function() {
  if ( $('#main_intranet-main').length ) {
  $.getJSON("http://172.17.45.137:8080/cgi-bin/koha/svc/report?id=396&annotated=1", function(data) {
    if ( data.length ) {
      $('#news8').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Statistics</thead><tbody><tr id="mystatstb"><td><strong>Branch</strong></td><td><strong>Unique Titles</strong></td><td><strong>Total Copies</strong></td></tr></tbody></table></div>');
      for ( var key in data ) {
        $('<tr id=\"tr'+ key + '"><td class="text-center">' + data[key].description + '</td><td class="text-center">' + data[key].bibs + '</td><td class="text-center">' + data[key].items + '</td></tr>').insertAfter( $( '#mystatstb' ) );
      }
    }
  });
  }
});

The output of the JSON data

[{"items":54576,"description":"Books","imageurl":"bridge/book.png","bibs":48760},{"imageurl":"bridge/periodical.png","items":4386,"description":"Continuing Resources, Back volumes of print journals","bibs":90},{"bibs":85,"imageurl":"","items":87,"description":"Kindle E-books"},{"bibs":777,"description":"Multimedia Resources","items":848,"imageurl":"liblime-kids/music-CD.gif"},{"bibs":38,"imageurl":"bridge/e_book.png","items":38,"description":"Open Access E-books "},{"items":1685,"description":"Perpetual/Purchased E-books","imageurl":"bridge/e_book.png","bibs":1677},{"imageurl":"npl/Reference.gif","description":"Reference","items":3265,"bibs":1622},{"imageurl":"vokal/NEWBK-32px.png","items":28,"description":"Reports of Government and inter-governmental organizations","bibs":28},{"items":1866,"description":"Short Loan Item","imageurl":"","bibs":1158},{"description":"Subscribed E-books","items":3,"imageurl":"bridge/e_book.png","bibs":3}]

Answer 1

According to your table > tbody > tr , it has 3 columns ( td for Branch, Unique Titles, Total Copies), and your for loop also have 3 td , if you want to "add" photo in front of description (column 1) then your new generated row will have 4 column, but the header only have 3 column, is that what you want?

Since your original code is insert with <tr> , so i will assume you want to insert new row in the table > tbody , below the <tr id="mystatstb">...</tr> row:

$('#mystatstb').append('<tr id=\"tr' + key + '"><td><imd src="'+data[key]["imageurl"]+'"></td><td class="text-center">' + data[key].description + '</td><td class="text-center">' + data[key].bibs + '</td><td class="text-center">' + data[key].items + '</td></tr>')

This come with 4 columns, remove the column that you don't need or add new column on the mystatstb row to perfect the table.