How to use file_get_contents and json_decode in Javascript

Question

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 replies

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 have 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 is now looking 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 am beginner in Coding (C, C++)

Answer 1

Loading data via AJAX is asynchronous. Your first call ($.getJSON) is executed as soon as the page is loaded, but the callback function that you pass as a parameter, is executed only as soon as the underlying HTTP request is finished. This means that your program does not block to wait for the HTTP request; after calling $.getJSON(...) your program runs on, and the callback method is called at some time when the HTTP request finished.

You evaluate your data (in your second function) as soon as the page is loaded. But, since your data is loaded asynchronously, it is not yet loaded when the document is rendered and your function is executed.

The solution for your problem would be to move the code that evaluates your data into the callback function of $.getJSON(...):

$.getJSON('data.php', function(data) {
    if (!data.error) {
        // Process your data here!
    } else {
        alert(data.msg)
    }
});