I'm trying to access an API via jquery with ajax , here's my code
$(document).ready(function(){
function kimonoCallback(data) {
var ticker = '<ul id="webticker">';
var url = data.results.collection[i].alaune;
$.each(url,function(i, news ){
ticker += '<li>';
ticker += '<a href="'+ news.href+ '">';
ticker += '<img src="img/ticker_sep.png" alt="sep"/>';
ticker += '"'+ news.text +'" </a></li>';
});
ticker += '</ul>';
$('#tickernews').html(ticker);
}
$.ajax({
"url":"https://www.kimonolabs.com/api/d7dujppi?apikey=xxxxxxxxxxxxxxxxxxxx&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
});
when i try to see the results in the webpage nothing come up no error in the console. so how do i make the request and display the text my webpage.
check the api here
Working example: http://jsfiddle.net/6jU3b/5/
Call your method in the success method of the ajax response rather than trying to execute it when returned from the server.
I also changed your $.each
statement a bit to reflect the updated object (you changed it from collection
to collection1
while I was working on it :{
$(document).ready(function(){
$.ajax({
url:"https://www.kimonolabs.com/api/d7dujppi?apikey=94d5808efe01f5eab40a5027c54bf86f",
crossDomain:true,
dataType:"jsonp",
success: function(data) {
console.log(data);
kimonoCallback(data);
}
});
function kimonoCallback(data) {
var ticker = '<ul id="webticker">';
var url = data.results.collection1;
$.each(url,function(key, value){
ticker += '<li>';
ticker += '<a href="'+ value.alaune.href + '">';
ticker += '<img src="img/ticker_sep.png" alt="sep"/>';
ticker += '"'+ value.alaune.text +'" </a></li>';
});
ticker += '</ul>';
$('#tickernews').html(ticker);
}
});