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++)

there is no `file_get_contents()` in javascript. You can use ajax to download page **from same domain only** — Peter, Feb 09 '13 at 12:59
Means it is better to convert Javascript to PHP Code than. Thanks for your reply. — user2036282, Feb 09 '13 at 13:03
Acctionaly you should mix PHP+AJAX to get it work. Create button HTML in separate file using PHP, download button using AJAX — Peter, Feb 09 '13 at 13:06
Example : https://gist.github.com/anonymous/4745269 . But to be honest Google gives you access to JAVASCRIPT API so you don't need to use PHP at all.... — Peter, Feb 09 '13 at 13:11
hey check may be this link useful for you http://stackoverflow.com/questions/8227638/how-to-embed-php-script-in-javascript — Venkata Krishna, Feb 09 '13 at 13:27
maybe this can be useful too http://www.ulozto.net/xSf4Aap/ajaxpost-zip — Stano, Feb 09 '13 at 13:33
Added more to my Question. Thanks at all but sorry I am beginner with coding thats why I have to ask more until I can finish or understand it. Thanks again. — user2036282, Feb 09 '13 at 17:00

score 0 · Accepted Answer · answered Feb 09 '13 at 19:48

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)
    }
});

How to use file_get_contents and json_decode in Javascript

1 Answers1