Im working with a system that generates data and puts it into the javascript file. I need a way of displaying that data on a website. Here is an example of the type of code I am getting in the outputted JS fle. { "version": "1.1", "encoding": "UTF8", "socialNetworks": [ { "id": "myspace", "displayName": "MySpace", "logo": "http://x.myspace.com/images/ireland_com.gif", "registerURL" : "http://signups.myspace.com/modules/signup/pages/createaccount.aspx?fuseaction=signup", "credentialsStored" : false } , { "id": "photobucket", "displayName": "PhotoBucket", "logo": "http://pic.photobucket.com/headerfooter/pblogo_144ea2.gif", "registerURL" : "http://photobucket.com/register/?ref=homejoin", "credentialsStored" : true } , { "id": "picasa", "displayName": "Picasa", "logo": "http://picasa.google.com/assets/logo.gif", "registerURL" : "https://www.google.com/accounts/NewAccount?hl=en_US&continue=http%3A%2F%2Fpicasaweb.google.com%2Flh%2Flogin%3Fcontinue%3Dhttp%253A%252F%252Fpicasaweb.google.com%252F&service=lh2&passive=true", "credentialsStored" : true } , { "id": "snapfish", "displayName": "Snapfish", "logo": "http://static.snapfish.com/MD5=1bdc527e32447862674db4bf6dcc953e/default/images/header/logo-green.gif", "registerURL" : "http://www.snapfish.com/registration", "credentialsStored" : false } ] } Code (markup): This should be displayed on a page as a menu seperated with pipes or some type of seperator and when you click on the menu should display the following below the menu item. 1.The displayname in h2 font 2. The logo, linking to the registerURL. The logo should only link if the "credentialsStored" is set to true in the JSON. There should be no border around the image, and the alt attribute must be set to the displayname 3. A link saying "click here to register", and the link must open a new window to the registerURL. This link should only be shown if the "credentialsStored" is set to true in the JSON Also a "Show all" link will display all 4 networks available in the JSON. Im fairly new to working with JSONs and the client says he is not keen on using prebuilt libraries like Jquery which makes it even harder. He wants this as small and sleek as possible. Any help would be appreciated.
obviously tweak as you deem fit, just deal with json as an array. <script type="text/javascript"> var data = { "version": "1.1", "encoding": "UTF8", "socialNetworks": [ { "id": "myspace", "displayName": "MySpace", "logo": "http://x.myspace.com/images/ireland_com.gif", "registerURL" : "http://signups.myspace.com/modules/signup/pages/createaccount.aspx?fuseaction=signup", "credentialsStored" : false } , { "id": "photobucket", "displayName": "PhotoBucket", "logo": "http://pic.photobucket.com/headerfooter/pblogo_144ea2.gif", "registerURL" : "http://photobucket.com/register/?ref=homejoin", "credentialsStored" : true } , { "id": "picasa", "displayName": "Picasa", "logo": "http://picasa.google.com/assets/logo.gif", "registerURL" : "https://www.google.com/accounts/NewAccount?hl=en_US&continue=http%3A%2F%2Fpicasaweb.google.com%2Flh%2Flogin%3Fcontinue%3Dhttp%253A%252F%252Fpicasaweb.google.com%252F&service=lh2&passive=true", "credentialsStored" : true } , { "id": "snapfish", "displayName": "Snapfish", "logo": "http://static.snapfish.com/MD5=1bdc527e32447862674db4bf6dcc953e/default/images/header/logo-green.gif", "registerURL" : "http://www.snapfish.com/registration", "credentialsStored" : false } ] }, showData = function() { for (ii in data.socialNetworks) { var network = data.socialNetworks[ii], targetElement = document.getElementById("targetElement"); var displayName = document.createElement('h2'); displayName.innerHTML = network.displayName; var registerURL = document.createElement('a'); registerURL.setAttribute("href", network.registerURL); registerURL.setAttribute("target", "_blank"); registerURL.innerHTML = "<img src='"+network.logo+"' alt='Register at "+network.displayName+"' border='0' />"; var registerURL2 = document.createElement('a'); registerURL2.setAttribute("href", network.registerURL); registerURL2.setAttribute("target", "_blank"); registerURL2.innerHTML = "click here to register"; targetElement.appendChild(displayName); targetElement.appendChild(registerURL); targetElement.appendChild(registerURL2); } }; window.onload = function() { showData(); }; </script> <div id="targetElement" style="width: 300px;text-align: center"></div> PHP: http://fragged.org/dev/json.php needs a <br> or something but you get the idea.
Very good thanks. Just one problem, the JSON.js file is generated by a backend. Any way of linking it in using something like var data ="json.js" Code (markup): Thanks Mike
Nop, include this in your <head> section and var data will be available: <script type="text/javascript" language="javascript" src="json.js"></script> HTML: Cheers/Ðаздраве
well the back-end can be something like json.php, included as described by koko above, just prefix it all with var data = ... if you have no control over the feed, then you need to XHR get the file via javascript and evaluate the response into a varname. i am sure you can get a lot of ideas on hold to javascript json encode/decode on google
Yeah but is there a way to then execute it, will I need to use some sort of PHP include (which I dont want to do because itss upposed to only be called once across the site) will I have to go to the department that developed the back end solution and tell them they need to add stuff like "var data" to the code or is there some way to call it, say based on the tag "socialNetworks" which the data seems to be a subset of. Edit, just saw this. Not sure if I have the ability to control the feed, have to contact an IT department who I dont really get on with, they are looking to cut me down after I slagged of the use of JSON as bulky, search engine hostile, etc etc. I normally never use scripts this big and bloated, any chance anyone can show me how I can append the "var data" Edit again Just saw this page. http://www.thefutureoftheweb.com/blog/cross-domain-json-without-xhr ANy chance someone can help me mesh this into my script?
Ok this still isnt working. Can anyone see where I am going wrong? <html><head> <script type="text/javascript"> function addScript(url) { var script = document.createElement('script'); script.src = 'json.js'; document.body.appendChild(script); } var data; data=document.getElementById('script'); ,showData = function() { for (ii in data.socialNetworks) { var network = data.socialNetworks[ii], targetElement = document.getElementById("targetElement"); var displayName = document.createElement('h2'); displayName.innerHTML = network.displayName; var registerURL = document.createElement('a'); registerURL.setAttribute("href", network.registerURL); registerURL.setAttribute("target", "_blank"); registerURL.innerHTML = "<img src='"+network.logo+"' alt='Register at "+network.displayName+"' border='0' /><br>"; var registerURL2 = document.createElement('a'); registerURL2.setAttribute("href", network.registerURL); registerURL2.setAttribute("target", "_blank"); registerURL2.innerHTML = "click here to register"; targetElement.appendChild(displayName); targetElement.appendChild(registerURL); targetElement.appendChild(registerURL2); } }; window.onload = function() { addScript(),showData(); }; </script> <style type="text/css"> </head><body> <div id="targetElement" style="width: 300px;text-align: center"></div> </body> </html> Code (markup):
Hi, at first sight - ,showData = function() =>remove comma (,) And at the second - it cannot work, because you're assigning data to the element with id 'script', and there's none. And even if there would be one, you cannot get javascript data in this way. By including the json.js you already can access variable 'data' without any special tricks (no need data=document.getElementById('script'). Also why don't you use the code from dimitar_christoff??
well not quite... it goes: var varname1, varname2, function1() {}, etc etc; so: var data; data=document.getElementById('script'); ,showData = function() { becomes: var data = document.getElementById('script'), showData = function() { none of that is the problem though, you have not setup your callback.
this was new for me too, but i got it to work, http://fragged.org/dev/json2.php. the idea of this script is to allow cross-domain data fetching - something that XHR would disallow due to browser security limitations. I don't think that's suitable for you, however - if i understand it correctly, it its going to be a feed generated and hosted on the same server. since it involves a callback function, it would mean altering the json.js as well - it won't make a difference if its data = { or json_callback( ) that you need to add to script. the alternative (should your it department say they cannot modify the output) to that is to fetch it via XHR (ajax) and evaluate the response into the variable data instead... for now, you can use this source: <html> <head> <script type="text/javascript"> var json_callback = function(data) { for (ii in data.socialNetworks) { var network = data.socialNetworks[ii], targetElement = document.getElementById("targetElement"); var displayName = document.createElement('h2'); displayName.innerHTML = network.displayName; var registerURL = document.createElement('a'); registerURL.setAttribute("href", network.registerURL); registerURL.setAttribute("target", "_blank"); registerURL.innerHTML = "<img src='"+network.logo+"' alt='Register at "+network.displayName+"' border='0' /><br>"; var registerURL2 = document.createElement('a'); registerURL2.setAttribute("href", network.registerURL); registerURL2.setAttribute("target", "_blank"); registerURL2.innerHTML = "click here to register"; targetElement.appendChild(displayName); targetElement.appendChild(registerURL); targetElement.appendChild(registerURL2); } }, showData = function() { var script = document.getElementById("myscript"); script.src = 'json.js?callback=json_callback'; }; window.onload = function() { showData(); }; </script> <script id="myscript"></script> </head> <body> <div id="targetElement" style="width: 300px;text-align: center"></div> </body> </html> PHP: ...and the contents of json.js need to be: json_callback({ "version": "1.1", "encoding": "UTF8", "socialNetworks": [ { "id": "myspace", "displayName": "MySpace", "logo": "http://x.myspace.com/images/ireland_com.gif", "registerURL" : "http://signups.myspace.com/modules/signup/pages/createaccount.aspx?fuseaction=signup", "credentialsStored" : false } , { "id": "photobucket", "displayName": "PhotoBucket", "logo": "http://pic.photobucket.com/headerfooter/pblogo_144ea2.gif", "registerURL" : "http://photobucket.com/register/?ref=homejoin", "credentialsStored" : true } , { "id": "picasa", "displayName": "Picasa", "logo": "http://picasa.google.com/assets/logo.gif", "registerURL" : "https://www.google.com/accounts/NewAccount?hl=en_US&continue=http%3A%2F%2Fpicasaweb.google.com%2Flh%2Flogin%3Fcontinue%3Dhttp%253A%252F%252Fpicasaweb.google.com%252F&service=lh2&passive=true", "credentialsStored" : true } , { "id": "snapfish", "displayName": "Snapfish", "logo": "http://static.snapfish.com/MD5=1bdc527e32447862674db4bf6dcc953e/default/images/header/logo-green.gif", "registerURL" : "http://www.snapfish.com/registration", "credentialsStored" : false } ] }); PHP: notice json_callback( ... ); encapsulates the data. like i said, the great thing about this is that you can have the json.js and the web page run on different boxes/domains although you should be able to do the same via "data = { json };" as well... things would be SO much easier if you succumb to using a framework -- and i wouldn't call this a 'big and bloated' script, it barely is touching the surface
2 dimitar_ch, this always generates syntax error : var data; data=document.getElementById('script'); ,showData = function() {....