I'm currently working with a restful API, MVC, and ajax. My goal is to retrieve data from the backend and then display images within certain div elements. The expected outcome should resemble this example: https://i.stack.imgur.com/BFqWL.png
This snippet showcases my backend code:
/*route:api/images*/
[HttpGet]
public IEnumerable<DTO> GetData(string Id) {
/*Do something*/
return Dto;/*the dto has an imgurl property*/
}
Here's a glimpse of my frontend implementation:
<div id="mydiv></div>
<script>
$(document).ready(function () {
$.ajax({
url: "http://localhost:59245/api/api/images",
type: "Get",
success: function (data) {
for (var i = 0; i < data.length - 1; i++) {
$('<div class="col-lg-4 col-sm-6"><div class="thumbnail">'+
'<h3 class="centrar">' + data[i].Titulo + '</h3><a href="'+
data[i].ImagenUrl+'</a><p>'+data[i].Paragraph+'</p></div>'
).appendTo("#mydiv");
}
},
error: function (msg) { alert(msg); }
});
});
</script>
My issue arises when attempting to display images within #mydiv, resulting in undesired output like this: https://i.stack.imgur.com/il5vz.png
The image shows that the anchor tag wraps around the paragraph text, which was not intended in my ajax code. How can I resolve this issue? Thank you