How do you use the JSON data pulled from an external php file in your javascript/html?

Question

I was able to pull the JSON data and put it into my HTML file as a script in my head. How do I gain access to this data? (put it into usable variables)

external json.php file (populated with mySQL data):

names: 
[
    {"firstName":"Kevin","lastName":"Guo"},
    {"firstName":"Jun Sung","lastName":"Wong"},
    {"firstName":"Anton","lastName":"Ansalmar"},
    {"firstName":"Linda","lastName":"Wong"},
    {"firstName":"George","lastName":"Costanza"}
]

my javascript code that pulls in the external json data:

var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://totallyExternalURL.php";
elm.id="jsonTest";
console.log(elm);
document.getElementsByTagName('head')[0].appendChild(elm);

The entire json data is put as a script in my head, how can I pull all the firstnames/lastnames for display?

Answer 1

What you're doing is actually known as jsonp. Normally what you'd do is have the script return a script calling a function on your page with the data. You might find it easier to work with jQuery either using jsonp or, if calling a script on your own server, regular `json'.

function callback(data) {
  ... do something with the returned data
}

var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://totallyExternalURL.php?callback=callback";
elm.id="jsonTest";
console.log(elm);
document.getElementsByTagName('head')[0].appendChild(elm);

Then have your external script return (note, your script should detect the value of the callback parameter and use that as the name of the function to invoke). The name of the function and the value of the callback parameter need to be the same.

callback( { "names" : 
    [
        {"firstName":"Kevin","lastName":"Guo"},
        {"firstName":"Jun Sung","lastName":"Wong"},
        {"firstName":"Anton","lastName":"Ansalmar"},
        {"firstName":"Linda","lastName":"Wong"},
        {"firstName":"George","lastName":"Costanza"}
    ] });

Or with jQuery

 $.getJSON( 'http://totallyExternalURL.php?callback=?', function(data) {
       ... do something with the data ...
 });

Answer 2

Make the js returned as a function that returns the a javascript object that is the array and then you can make a call to that function and assign the return value to a variable.

So wrap the JSON in a function call.

Look up jsonp.