html - Load JSON data into jQuery component -
i want display data external json file on webpage.
data.json:
{"users":[ { "firstname":"s", "lastname":"s", "joined": { "month":"january", "day":12, "year":2012 } }, { "firstname":"s", "lastname":"p", "joined": { "month":"april", "day":28, "year":2010 } } ]} html code follows:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>json sample</title> </head> <body> <div id="placeholder"></div> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $.getjson('data.json', function(data) { var output="<ul>"; (var in data.users) { output+="<li>" + data.users[i].firstname + " " + data.users[i].lastname + "--" + data.users[i].joined.month+"</li>"; } output+="</ul>"; document.getelementbyid("placeholder").innerhtml=output; }); </script> </body>hello world </html> when run code on chrome following error:
xmlhttprequest cannot load file:///c:/users/.../jsonjquery/data.json. cross origin requests supported protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
however, same code runs on firefox. not able figure out going wrong same code on 2 different browsers.
on changing html code access file web, cross-origin error(this happens on both firefox , chrome)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>json sample</title> </head> <body> <div id="placeholder"></div> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> $.getjson('www.somedomain.com/data.json', function(data) { var output="<ul>"; (var in data.users) { output+="<li>" + data.users[i].firstname + " " + data.users[i].lastname + "--" + data.users[i].joined.month+"</li>"; } output+="</ul>"; document.getelementbyid("placeholder").innerhtml=output; }); </script> </body>hello world </html> my question reason of these errors? there other way access data placed remotely?
update: jsonp implementation works fine! thanks!
what trying implement add accordion groups dynamically(by reading json file). keep getting error:
'uncaught typeerror: $(...).accordion not function'
below code:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script type="text/javascript" src="external/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="external/jquery.ui.core.min.js"></script> <script type="text/javascript" src="external/jquery.ui.widget.min.js"></script> <script> (function($) { var url = 'http://www.somedomain.com/data.json?callback=?'; $.ajax({ type: 'get', url: url, async: false, jsonpcallback: 'jsoncallback', contenttype: "application/json", datatype: 'jsonp', success: function(json) { console.dir(json.sites); var $bar = $( "#accordion" ).accordion(); $bar.accordion('cleargroups'); $.each(data, function(id, group){ $bar.accordion('addgroup', group); }); }, error: function(e) { console.log(e.message); } }); })(jquery); </script> <style type="text/css"> .widget { width: 300px; height: 300px; } </style> </head> <body> <div id="accordion" class="widget"></div> </body> </html> can me out it?
i sure must syntactical error, not able figure out! :(
use $.each() manipulating json data :
$.getjson('data.json', function(data) { var output = "<ul>"; $.each(data.users, function(i, item) { output += '<li>' + item.firstname + ' ' + item.lastname + ' ' + item.joined.month + '</li>' }); output += "</ul>"; document.getelementbyid("placeholder").innerhtml = output; }); also cross origin error, add callback=? get parameter url in $.getjson.
but in general have implement jsonp done right.
refrences :
http://www.w3schools.com/jquery/ajax_getjson.asp
Comments
Post a Comment