How to use ajax call using external Json data

Manideepgoud
Posted by Manideepgoud under jQuery category on | Points: 40 | Views : 658
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

Comments or Responses

Login to post response