How to use file_get_contents and json_decode in Javascript
I am trying to use this PHP API in Javascript. How can I use file_get_contents and json_decode in Javascript?
PHP API Code
$content=@file_get_contents("http://doma.in/api/?url=http://www.google.com&api=APIKEY");
$url=json_decode($content,TRUE);//Decodes json into an array
if(!$url["error"]){ // If there is no error
echo $url["short"]; //Outputs the short url
}else{
echo $url["msg"]; //Outputs the error message
}
Javascript
(function( $ ) {
$(document).ready(function() {
var url = window.location.href;
var host = window.location.hostname;
var title = $('title').text();
title = escape(title);
var twitter = 'http://twitter.com/home?status='+title+'%20'+url;
var facebook = 'http://www.facebook.com/sharer.php?u='+url;
var tbar = '<div id="sicons">';
tbar += '<a href="'+twitter+'" id="twitter" title="Share on twitter">Twitter</a>';
tbar += '<a href="'+facebook+'" id="facebook" title="Share on Facebook">Facebook</a>';
tbar += '</div>';
});
})(jQuery);
Edit: thanks to the answers
data.php
$content = @file_get_contents('http://doma.in/api.php?api=asd4sdf5634d&url=' . urlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']));
echo $content;
I added this to the top of the Javascript
$.getJSON('data.php', function(data) {
if(!data.error){ // If there is no error
alert(data.short) //Outputs the short url
}else{
alert(data.msg)
}
});
The Javascript now looks like this
(function( $ ) {
$(document).ready(function() {
var shorturl = data.short;
var title = $('title').text();
title = escape(title);
var twitter = 'http://twitter.com/home?status='+title+'%20'+url;
var facebook = 'http://www.facebook.com/sharer.php?u='+url;
var tbar = '<div id="sicons">';
tbar += '<a href="'+twitter+'" id="twitter" title="Share on twitter">Twitter</a>';
tbar += '<a href="'+facebook+'" id="facebook" title="Share on Facebook">Facebook</a>';
tbar += '</div>';
});
})(jQuery);
I am sure I am doing something wrong. Sorry, but I'm new to Coding (C, C ++)
source to share
Loading data via AJAX is asynchronous . The first call ( $.getJSON
) is executed as soon as the page is loaded, but the callback function passed as a parameter is only executed after the main HTTP request completes. This means that your program does not block to wait for an HTTP request; after the call, $.getJSON(...)
your program is run and the callback method is called at the time the HTTP request is complete.
You are evaluating your data (in the second function) as soon as the page loads. But since your data is loaded asynchronously, it is not yet loaded when the document is rendered and your function is being executed.
The solution to your problem was to move the code that evaluates your data into a callback function $.getJSON(...)
:
$.getJSON('data.php', function(data) {
if (!data.error) {
// Process your data here!
} else {
alert(data.msg)
}
});
source to share