Question posted in
You can find the official documentation here.

Jquery ajax – how to display image get from ajax response

$.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…

Tags:

2

Answers


  1. 0

    Use the append() method of jQuery for rendering html in web page.

     $('#result').append(s);
    Login or Signup to reply.
  2. 0

    Consider the following code.

    $.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 (r) {
    $.each(r.restaurants, function (i, v) {
      $("<img>", {
        src: v.featured_image
      }).appendTo($('#result');
    });
  }
});

    When the AJAX is successful, this will create a new image based on the response using $.each() and append each image from the restaurants Object.

    See more: https://api.jquery.com/jquery.each/

    The $.each() function can be used to iterate over any collection, whether it is an object or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword, but Javascript will always wrap the this value as an Object even if it is a simple string or number value.) The method returns its first argument, the object that was iterated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search