javascript - Display JSON dictionary in browser using html -
so i've looked , looked , looked @ different answers on stackexchange , other web forums , still don't understand this. i've got .json file contains info excel document. want display on web browser -> easiest way seems writing in html.
how open json file html?? i'm happy having entire json file displayed on html script love able set variable , pull things out of normal json object.
i have code below making table want - real json object in separate file.
<html> <head> <title>creation of array object in javascript using json</title> <script language="javascript" > document.writeln("<h2>json array object</h2>"); var books = { "pascal" : [ { "name" : "pascal made simple", "price" : 700 }, { "name" : "guide pascal", "price" : 400 } ], "scala" : [ { "name" : "scala impatient", "price" : 1000 }, { "name" : "scala in depth", "price" : 1300 } ] } var = 0 document.writeln("<table border='2'><tr>"); for(i=0;i<books.pascal.length;i++) { document.writeln("<td>"); document.writeln("<table border='1' width=100 >"); document.writeln("<tr><td><b>name</b></td><td width=50>" + books.pascal[i].name+"</td></tr>"); document.writeln("<tr><td><b>price</b></td><td width=50>" + books.pascal[i].price +"</td></tr>"); document.writeln("</table>"); document.writeln("</td>"); } for(i=0;i<books.scala.length;i++) { document.writeln("<td>"); document.writeln("<table border='1' width=100 >"); document.writeln("<tr><td><b>name</b></td><td width=50>" + books.scala[i].name+"</td></tr>"); document.writeln("<tr><td><b>price</b></td><td width=50>" + books.scala[i].price+"</td></tr>"); document.writeln("</table>"); document.writeln("</td>"); } document.writeln("</tr></table>"); </script> </head> <body> </body> </html> to clarify: above code works great; want contents of .json file saved on local drive.
thanks in advance.
i see didn't include jquery tag, i'll provide couple of vanilla javascript solutions:
if file located @ accesible directory, can pull info this:
define json object follows:
original:
[{ "name" : "john", "date" : "01-27-2014" }] modified javascript:
var info = '[{ "name" : "john", "date" : "01-27-2014" }]'; and save plain text document named mydata.json.js, illustration (the double extension has nil content itself).
so becomes valid javascript file , can load on html this:
<script src="mydata.json.js"></script> and can utilize data var on html normally.
or utilize if don't have document locally or above approach makeshifty you. refer this question. quoting:
function loadjson(path, success, error) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if (xhr.readystate === 4) { if (xhr.status === 200) { if (success) { success(json.parse(xhr.responsetext)); } else { if (error) error(xhr); } } }; xhr.open("get", path, true); xhr.send(); } call as:
loadjson('my-file.json', function(data) { console.log(data); }, function(xhr) { console.error(xhr); } ); update:
you can create global var, e.g. data, store retrieved json , redefine function follows:
if (xhr.readystate === 4 && xhr.status === 200) { info = json.parse(xhr.responsetext); // contains json object. } note xhr.responsetext raw json string , json.parse(…) functions returns javascript collection info of json.
javascript html json browser
No comments:
Post a Comment