How to consume the images link through Ajax?

Question

I am trying for several hours to consume the links of the images of a web service through Ajax and I can’t, this is the web service link (https://api.tenor.com/v1/search?q=happy).

The goal is to take the link of the image and show the image on the screen. It says that this indefinite link, I have no idea why this is happening.

See my code:

  $(function(){

    $.ajax({

        url:'https://api.tenor.com/v1/search?q=happy',
        type:'GET',
        dataType:'json',
        beforeSend:function(){
            $('.gifs').html('<div class="col-md-12"><i class="fas fa-7x fa-spinner fa-spin"></i></div>');
        },
        success:function(json){

           var html = '';

           for(var i in json){
            html += '<div class="col-md-4"><div class="filme"><img src="'+json[i].weburl+'"/>'+'</div></div>';
           }

           $('.gifs').html(html);
        }

    });

});

Answer 1

Try to do it this way:

<script  src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){

$.ajax({

    url:'https://api.tenor.com/v1/search?q=happy',
    type:'GET',
    dataType:'json',
    beforeSend:function(){
        $('.gifs').html('<div class="col-md-12"><i class="fas fa-7x fa-spinner fa-spin"></i></div>');
    },
    success:function(json){
	   var html = '';
	   var total = json.results.length;
	   for(var i = 0; i < total; i++){
			html += '<div class="col-md-4"><div class="filme"><img src="'+json.results[i].media[0].gif.url+'"/>'+'</div></div>';
       }

       $('.gifs').html(html);
    }

});
});
</script>
<div class="gifs"></div>