Display JSON dictionary in browser using html

Question

So I've looked and looked and looked at different answers on StackExchange and other web forums and I still don't understand this. I've got a .json file that contains the information from an excel document. I want to display it on a web browser -> the easiest way to do this seems to be writing it in html.

How do I open the JSON file with html?? I'm happy with having the entire JSON file displayed on the html script but I would love to be able to set is as a variable and pull things out of it like a normal JSON object.

I have the code below for making a table which is what I want to do - but the real JSON object is in a 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 to Pascal", "price" : 400 }
   ],                       
   "Scala"  : [
      { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
      { "Name"  : "Scala in Depth", "price" : 1300 }
   ]    
}    

var i = 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: The above code works great; but I want to do it with the contents of a .json file saved on my local drive.

Thanks in advance.

To load in JSON outside of the initial HTML page, you'll need to do so using a background request (commonly called AJAX). The easiest way for you to load JSON data would be to make use of a Javascript library with solid documentation, examples, etc as well as an easy interface for doing what you want. Jquery can help you there — Brian
– Brian, Commented Jun 24, 2014 at 23:51
Thank you to everyone who replied! I'm going to try out all of these answers and see which works best for my project. Follow-up question: A lot of people mentioned jquery (@Brian) is this widely considered the "correct" way of doing this? Should I just go ahead and download it? — Isa
– Isa, Commented Jun 25, 2014 at 16:15
jQuery isn't the "correct" way of doing it, but making your own AJAX calls is a very complicated process as opposed to calling jQuery's getJSON method. Your code suggests to me that you're relatively new to Javascript development (nothing wrong with that we all were once :P) and as such, a library like jQuery may be a good springboard to get you going :) — Brian
– Brian, Commented Jun 25, 2014 at 18:21

Community · Accepted Answer · 2017-05-23 12:20:44Z

1

I see that you didn't include the jquery tag, so I'll provide a couple of vanilla javascript solutions:

If the file is located at an accesible directory, you can pull the data like this:

Define your JSON object as follows:

Original:
```
[{ "name" : "John", "date" : "01-27-2014"  }]
```
Modified into javascript:
```
var data = '[{ "name" : "John", "date" : "01-27-2014"  }]';
```
And save it to a plain text document named mydata.json.js, for example (the double extension has nothing to do with the content itself).

So it becomes a valid javascript file and you can load it on your html like this:
```
<script src="mydata.json.js"></script>
```
And you can use your data var on your HTML normally.

Or use this if you don't have the document locally or the above approach is too makeshifty for you. Refer to 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 it as:

loadJSON('my-file.json',
    function(data) { console.log(data); },
    function(xhr) { console.error(xhr); }
);

Update:

You can create a global var, e.g. data, to store the retrieved JSON and redefine the function as follows:

if (xhr.readyState === 4 && xhr.status === 200) {
    data = JSON.parse(xhr.responseText); // This now contains the JSON object.
}

Note that xhr.responseText is the raw JSON string and the JSON.parse(…) functions returns a javascript collection with the data of that JSON.

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered Jun 24, 2014 at 23:58

arielnmz

9,21510 gold badges43 silver badges73 bronze badges

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

6 Comments

Isa Over a year ago

I really like this answer (number 1) but this is a pre-existing json file (not made by me, I think I should add) and while I was able to add the .js extension I'm unsure how to add the **var data = '[{...}]' ** parameter.

arielnmz Over a year ago

@Isa Just surround your entire JSON string with quotes ' or double quotes " to make them strings and assign them to the data var, check my updated answer.

Isa Over a year ago

I'm sorry, I don't understand how to do this. My code needs to be able to use the json file without me needing to go in a manipulate the actual .json file. How do I add the variable (for lack of a better word) remotely?

arielnmz Over a year ago

Sorry, now I understand. In that case your best bet is to retrieve the file using the REST approach (the second solution) but the file needs to be located under the same domain or in the same server.

Isa Over a year ago

I'm still having trouble making this work. How would I then call the information stored within the json file? Is it now stored within the "data" variable? If you could do pseudo code with the code for the html table I would really appreciate it.

|

Karol · Accepted Answer · 2014-06-24 23:50:22Z

1

You need to pull JSON using AJAX.

This will require you to have web server running, as some browsers, e.g. Chrome will block requests to local resources. Also have in mind that AJAX & JSON request will work only within the same domain (same origin policy), or you will have to use JSONP.

If you can use jQuery (hence it's an easiest way), look here: http://api.jquery.com/jquery.getjson/

$.getJSON( "test.json", function( data ) {
  $.each( data, function( key, val ) {
    // do something
  });
});

Hope it helps!

answered Jun 24, 2014 at 23:50

Karol

8,09313 gold badges51 silver badges68 bronze badges

Comments

zachzurn · Accepted Answer · 2014-06-25 00:09:55Z

0

You can do this without the need for ajax by using a server side language such as PHP. You can include the raw JSON into a Javascript variable.

Below is an example of including the file with PHP:

<script>

    //JSON included via PHP
    var books = <?php include('books.json'); ?>;

</script>

The file "books.json" would contain your raw JSON information:

{ "Pascal" : [ 
      { "Name"  : "Pascal Made Simple", "price" : 700 },
      { "Name"  : "Guide to Pascal", "price" : 400 }
   ],                       
   "Scala"  : [
      { "Name"  : "Scala for the Impatient", "price" : 1000 }, 
      { "Name"  : "Scala in Depth", "price" : 1300 }
   ]    
}

answered Jun 25, 2014 at 0:09

zachzurn

2,21115 silver badges27 bronze badges

2 Comments

Isa Over a year ago

How would I then call the objects? "books.pascal.name" ? In other words, does PHP change the formatting in anyway? (Really new, here. Sorry)

zachzurn Over a year ago

PHP will not alter your file, it will include the file as-is. You will be able to access the JSON object as you would any javascript object.

Collectives™ on Stack Overflow

Display JSON dictionary in browser using html

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related