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?

Have you heard of CORS? It's the real way to do cross-domain requests... — beatgammit
– beatgammit, Commented Sep 29, 2011 at 8:37

tvanfosson · Accepted Answer · 2011-09-29 04:58:44Z

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

answered Sep 29, 2011 at 4:58

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

junsungwong Over a year ago

Thank you so much! The javascript method you put worked perfectly! The jquery method didn't work at all. (I'm using jquery v1.6.4 via google api) It just said that "callback is undefined." my javascript:

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

My jsonp is exactly as yours.

junsungwong Over a year ago

oh I got the jquery to work! thank you so much! I just didnt use jquery's callback function within the original statement, because it didn't work. The separate function callback(data) is called just fine.

javascript function callback(data) {   console.log(data);   console.log(data.names[0].firstName); }  $.getJSON( 'http://externalURL.php?callback=?');

smoothe · Accepted Answer · 2011-09-29 04:52:29Z

0

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.

answered Sep 29, 2011 at 4:52

smoothe

5761 gold badge4 silver badges12 bronze badges

1 Comment

smoothe Over a year ago

bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp check this out and niryariv.wordpress.com/2009/05/05/jsonp-quickly

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related