im trying to make this table:
<table id="list">
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Image</th>
</table>
and i have this javascript: in this JS... i get all producs and add it like: ID NAME PRICE IMAGE 1320 Keyboard 10.3 ??? 1221 Mouse 10.4 ???
the image is obtained from other api with a 1320 the ID of the Product..... (https://example.com/image/product/1320) it give 1 image in text in base64
i can return the image and the data... but i need add the image into the same table what i fill with name and price...
how can make it?
This my JS
<script>
$(document).ready( function () {
$.ajax({
url: "https://example.com/products",
type: "GET",
cache: true,
dataType: "json",
success: function(response){
$.each(response.resultProducts, function (key, value) {
$('#list').append("<tr>\
<td>"+value.id+"</td>\
<td>"+value.productName+"</td>\
<td>"+Math.round(value.Price/12).toFixed(2)+"</td>\
</tr>");
});
}
});
});
$.ajax({
url: "https://example.com/image/product/"+value.id+"",
type: "GET",
cache: true,
dataType: "text",
success: function(response){
var table = $("#list");
var xx = '<img src="data:image/png;base64, '+response+'" />';
table.append("<tr>\
<td>"+xx+"</td>\
</tr>");
}
});
</script>
You need to setup placeholders for the images and then use ajax to fill in the images later. Something like:
$(document).ready( function () {
$.ajax({
url: "https://example.com/products",
type: "GET",
cache: true,
dataType: "json",
success: function(response){
$.each(response.resultProducts, function (key, value) {
$('#list').append("<tr>\
<td>"+value.id+"</td>\
<td>"+value.productName+"</td>\
<td>"+Math.round(value.Price/12).toFixed(2)+"</td>\
<td class="+value.id+"></td>>\
</tr>");
$.ajax({
url: "https://example.com/image/product/"+value.id+"",
type: "GET",
cache: true,
dataType: "text",
success: function(response){
$("#list td."+value.id).replaceWith('<td><img src="data:image/png;base64, '+response+'" /></td>');
}
});
});
}
});
});