$.ajax({
url: "https://developers.zomato.com/api/v2.1/search?entity_id=52&entity_type=city&start=0&count=20",
dataType: 'json',
async: true,
beforeSend: function (xhr) {
xhr.setRequestHeader('user-key', '');
},
success: function (response) {
var s = "";
var i = 0;
var res_Arr = response.restaurants;
$.each(res_Arr, function (index, value) {
var res_img = res_Arr[i].restaurant.featured_image;
s = s + '<img src="' + res_img + '"/>';
i = i + 1;
})
$('#result').text(s);
}
});
I have tried to search online and tried multiple methods but i can’t spot the mistake I made…my console does not show any errors. I wanted to display out as an image but it shows the image link instead…
2
Answers
Use the
append()
method ofjQuery
for rendering html in web page.Consider the following code.
When the AJAX is successful, this will create a new image based on the response using
$.each()
and append each image from therestaurants
Object.See more: https://api.jquery.com/jquery.each/