Estoy tratando de hacer esta tabla:
<table id="list"> <th>ID</th> <th>Name</th> <th>Price</th> <th>Image</th> </table>y tengo este javascript: en este JS... obtengo todos los productos y los agrego como: ID NOMBRE PRECIO IMAGEN 1320 Teclado 10.3 ??? 1221 Ratón 10.4 ???
la imagen se obtiene de otra api con un 1320 la ID del Producto..... ( https://example.com/image/product/1320 ) da 1 imagen en texto en base64
Puedo devolver la imagen y los datos... pero necesito agregar la imagen en la misma tabla que llené con el nombre y el precio...
como se puede hacer
Este es mi 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>Debe configurar marcadores de posición para las imágenes y luego usar ajax para completar las imágenes más tarde. Algo como:
$(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>'); } }); }); } }); });