How to use ajax call using external Json data

Hi All,

In this below code , am going to show how to use ajax call with external json data,

First i define my html code, where i want to display the json data

<div class="container-fluid">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="row paddingrow ajaxBindingCode">
         </div>
       </div>
</div>

And in this below code, i will use ajax call to define the json data
I had created json data and stored in an external link
https://api.myjson.com/bins/1eic66

$(document).ready(function(){
$.ajax({ url: "https://api.myjson.com/bins/1eic66",
        context: document.body,
        dataType: 'json',
        success: function(data,status,xhr){
          var courseData = data.courses;
          for(var i=0;i< courseData.length;i++){
          var htmlBinding="";
            htmlBinding += '<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 myborder marginclass">';
            htmlBinding += '<div class="coursesection">';
            htmlBinding += '<div class="imagesection">';
            htmlBinding += '<img class="courseimagess" src="' +courseData[i].courseImg +'"/>';
            htmlBinding +=  '</div>';
            htmlBinding +=          '<div class="coursesubsection">';
            htmlBinding +=              '<div class="courses">';
            htmlBinding +=                  '<span class="courseleft">'+courseData[i].courseName+'</span>';
            htmlBinding +=                   '<span class="courseright">'+courseData[i].coursePrice+'</span>';
            htmlBinding +=              '</div>';
            htmlBinding +=              '<div class="coursecontent">';
            htmlBinding +=                '<p>'+courseData[i].courseContent+'</p>';
            htmlBinding +=              '</div>';
            htmlBinding +=          '</div>';
            htmlBinding +=          '<div class="row">';
            htmlBinding +=                '<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 buynowsection">';
            htmlBinding +=            '<div>';
            htmlBinding +=              '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">';
            htmlBinding +=                  '<div class="timesection">';
            htmlBinding +=                    '<span class="glyphicon glyphicon-time">'+courseData[i].courseDuration+'</span>';
            htmlBinding +=                  '</div>';
            htmlBinding +=              '</div>';
            htmlBinding +=              '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">';
            htmlBinding +=                '<div class="minutessection">';
            htmlBinding +=                  '<span class="glyphicon glyphicon-thumbs-up"> '+courseData[i].courseLikes+'</span>';
            htmlBinding +=                '</div>';
            htmlBinding +=              '</div>';
            htmlBinding +=              '<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">';
            htmlBinding +=                '<div class="minutessection">';
            htmlBinding +=              '<button class="btn btn-primary">Buy Now</button>';
            htmlBinding +=                '</div>';
            htmlBinding +=              '</div>';
            htmlBinding +=            '</div>';
            htmlBinding +=          '</div>';
            htmlBinding +=          '</div>';
            htmlBinding +=    '</div>';
            htmlBinding += '</div>';
            $('.ajaxBindingCode').append(htmlBinding);
          }
        }});
        $(".courses").click(function(){
          alert($(this).index());
 });
});

We have to define datatype, success, data, status, xhr, content and url