Saturday, May 24, 2014

Read JSON Data and Display in HTML Page Using JavaScript

I got a question based on my previous post which is "Read XML Data and Display in HTML Page 
Using JavaScript.  Question is, Isn't it easy to use JSON over XML?

Well if you are given a fair chance to decide to choose whether to use XML or JSON, How do you take a proper decision? Do you have enough facts considered? If you don't know the answer please have a look at this article that will help you to decide better. 

And further, if you haven't read my previous post, I really encourage to have a glance. 

By the way in this post, I thought of sharing how to use an external JSON file, read the data and display in the HTML page using JavaScript.

I will do few changes to the code compared to my previous post.

This time also 3 files that will be located in the same folder in order to make things simple to understand.

"EmployeeView.html" remains the same. And we use "EmployeeData.json" file instead of "EmployeeData.xml" but the data is same. And "ReadEmployeeJson.js" which is the JavaScript that does the majority of work.

Here we go...

I converted "EmployeeData.xml" to JSON and named it as "EmployeeData.json". Here how it looks like.

And here is the "ReadEmployeeJson.js"

Here we don't have lot of new things to understand. But make sure that you notice "JSON.parse(xmlhttp.responseText);" which does return an JSON object and later in "ReadJSON(jsonobj)" we read the data and generate the HTML output. Output looks exactly similar to my previous post.

This is a straight forward solution. Good Luck Dev Folks!

No comments:

Post a Comment