PHP script retrieves a JSON file - How do I pass it to JavaScript?

Question

Say I have a PHP script that retrieves JSON data for me:

<?php
    header('Content-Type:application/json; charset=utf-8'); 
    $url = "http://ipinfo.io/" . $_SERVER['REMOTE_ADDR'] . "/json";
    echo file_get_contents($url);

How do I parse this data in JavaScript?

@Pamblam Only users with certain AdBlock settings actived have my content blocked. http://stackoverflow.com/questions/34529007/how-to-prevent-the-client-from-blocking-an-external-resource — Cesare, Dec 31 '15 at 06:36
Do you want to pull this from the web server, and then push it to the client browser as JSON for it to unparse into an actual object that you can iterate elements upon? — Volomike, Dec 31 '15 at 06:53

score 1 · Accepted Answer · edited May 23 '17 at 10:29

So, looking at a data sample, we see that the URL:

http://ipinfo.io/104.111.103.12/json

Shows:

{
  "ip": "104.111.103.12",
  "hostname": "a104-111-103-12.deploy.static.akamaitechnologies.com",
  "city": "Cambridge",
  "region": "Massachusetts",
  "country": "US",
  "loc": "42.3626,-71.0843",
  "org": "AS35994 Akamai Technologies, Inc.",
  "postal": "02142"
}

Therefore:

<?php
    $sIP = $_SERVER['REMOTE_ADDR'];
    if ($sIP == '127.0.0.1') { // like testing at home on your own workstation
      $sIP = '104.111.103.12'; // use a dummy one just for this demo
    }
    $sURL = "http://ipinfo.io/" .$sIP . "/json";
    $sJSON = file_get_contents($sURL);
    $view = (object) array();
    $view->JSON = $sJSON;
?><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script type="text/javascript">

// global string of Data
var gsData = <?= $view->JSON ?>

$(document).ready(function(){
  var sRegion = gsData.region;
  $('#result').html(sRegion);
});

</script>
<div>Region from data is:</div>
<div id="result"></div>
</body>
</html>

...Shows this result on my home workstation webserver (which currently has IP 127.0.0.1):

Region from data is:
Massachusetts

Now, what you'll want to do, however, is never trust data. Let's say a hacker overtakes ipinfo.io and the JSON no longer becomes JSON, but something malicious. It then means that it can insert malicious code into your website from the client browser side, such as defacing the website or making it redirect to some very bad site full of malware.

There may also be a potential exploit (I'm not certain) at the point that PHP injects data into the HTML through the web server before it is sent to the client browser. There may be a weakness in the web server (again, not certain) where a buffer overrun could be done there, and then it can inject code into the web server such as causing it to create files that can then be executed remotely.

So, there are many articles on the web for how to polish and test data first before it is sent to the browser. That's beyond the scope of your question, but an extremely important point to remember.

Here's some information on how to validate JSON from PHP:

Validate json in php

Thanks! I'm testing your code on a new HTML file and not getting the expected result. Output: `JSON = $sJSON; ?> Region from data is:`. Does the PHP code have to be right above the HTML? I'm testing it via localhost. Does it have to stay on a real webserver? — Cesare, Dec 31 '15 at 07:14
Thanks for the explanation at the end - really informative. I put the HTML file containing your code at http://cesare.io/test/test.html — Cesare, Dec 31 '15 at 07:21
Yes, it has to run on a real web server, but can be a localhost one. — Volomike, Dec 31 '15 at 07:21
You have to rename the .html extension to .php in order for the web server to recognize and run the PHP part. — Volomike, Dec 31 '15 at 07:22

Yash · Answer 2 · 2015-12-31T07:43:17.710

0

<?php
$REMOTE_ADDR = "104.111.103.12";
$url = "http://ipinfo.io/" . $REMOTE_ADDR . "/json";
$data =  file_get_contents($url);
?>
<!doctype html>
<script>
var data = <?php echo $data;    ?>;
alert(data.ip);
</script>

edited Dec 31 '15 at 07:43

answered Dec 31 '15 at 07:14

Yash

929
9
25

PHP script retrieves a JSON file - How do I pass it to JavaScript?

2 Answers2