Parsing JSON file and using it in HTML

Question

I am really sorry for asking such a basic question, but I was not able to find a satisfying answer or a good tutorial anywhere.

I have a JSON file, called 'content.json' which has very basic data in it:

{
"records": [
  {
  "number": "001",
  "name": "Jill",
  "date": "2014. January 01."
  }

  {
  "number": "002",
  "name": "John",
  "date": "2014. March 03."
  }
]}

and so forth...

I would like to parse this JSON into an object that can be referenced in an html page. So, lets say, I would like to take the name entry of the first object of my JSON and use it as the content of a div (or any basic HTML object that is capable of displaying text). In other words, I would like to be able to get the content of the JSON file by referring to the object I parsed it into (like object.first_element.name or something like that) and it would give me Jill back to work with.

The problem is that my knowledge of Javascript is very basic (I'm pretty okay with HTML and CSS), and none of the tutorials I found were helpful regarding this particular problem. Could someone show me how to do this or at least direct me to a good tutorial?

It doesn't look like valid JSON. There's no parent and these objects should be separated with a comma and be part of an array { "records": [ { "number": "001", "name": "Jill", "date": "2014. January 01." }, { "number": "002", "name": "John", "date": "2014. March 03." } ] } — nhavar, Jun 02 '14 at 07:04

score 0 · Answer 1 · edited Jun 02 '14 at 07:08

0

Loop over the json like:

var obj = [{
"number": "001",
"name": "Jill",
"date": "2014. January 01."
},
{
"number": "002",
"name": "John",
"date": "2014. March 03."
}];

obj.forEach(function(v,k){
    alert(v.name);
});

edited Jun 02 '14 at 07:08

Menixator

125
5

answered Jun 02 '14 at 06:58

Systematix Infotech

2,345
1
14
31

Thanks for the answer, but I really don't want to include the actual content of the json file inside the html. what I am looking for is something like 'var json = parse:content.json' – user3698347 Jun 02 '14 at 07:05
so you're really looking for the means of **getting the file first** and then parsing it? Is that what you are asking for? – nhavar Jun 02 '14 at 07:09
See my answer for more details about what you are looking for. – nhavar Jun 02 '14 at 07:31

advncd · Answer 2 · 2014-06-02T07:13:36.193

0

You need to parse the JSON string to an object:

var theJSONstring; //your JSON contents from the file
var jsonObject = JSON.parse(theJSONstring);

You can probably access the items like this:

var secondNumber = jsonObject[1].number  //"002"

edited Jun 02 '14 at 07:13

answered Jun 02 '14 at 07:03

advncd

3,787
1
25
31

How do you add the json file into the theJSONstring variable without copying the content into the HTML file (it is quite long; so, I really don't want to do that)? – user3698347 Jun 02 '14 at 07:17
If you are using browser side JavaScript, you may call a web service and get the contents. If you are using Node, you can directly read the file like this: var contents = fs.readFile("c:\contents.json") – advncd Jun 02 '14 at 07:24

score 0 · Answer 3 · answered Jun 02 '14 at 07:05

Assuming the file resides along with your html and css files. You would first need to get it into your current page with the <script> tag. Also if you want to be able to access all the objects in the .json file then it would be easier to wrap the entire file content in a variable either as an array (shown below) or a parent object,

var myObj = [
    {
        "number": "001",
        "name": "Jill",
        "date": "2014. January 01."
    },
    {
        "number": "002",
        "name": "John",
        "date": "2014. March 03."
    }
]

then in the file you are accessing this from you could place its contents in a div with something like this,

document.getElementById('divId').innerHTML = myObj[0].name;

If on the other hand you are receiving this data from a server via an AJAX request as a text string then you may need to parse the received data via JSON.parse() before accessing the content.

score 0 · Answer 4 · answered Jun 02 '14 at 07:19

0

Can you please try below

var theJSONstring; //your JSON contents from the file
var jsonObject = @Html.Raw(JSON.parse(theJSONstring));


document.getElementById('mydiv').innerHTML = jsonObject[1].number  //"002"

answered Jun 02 '14 at 07:19

Chirag Arvadia

1,200
7
11

score 0 · Answer 5 · answered Jun 02 '14 at 07:28

Okay, first make sure you have valid json in your .json file. You can validate it using an online editor like JSON Editor Online here: http://www.jsoneditoronline.org/. Your example isn't valid JSON because it doesn't have a parent wrapper around the two sets of records. Additionally those should be in an array separated by a comma.

{ 
    "records": [ 
        { "number": "001", 
          "name": "Jill", 
          "date": "2014. January 01." }, 
        { "number": "002", 
          "name": "John", 
          "date": "2014. March 03." } 
    ] 
}

Next you want to use a library like jQuery that has a built in AJAX request like .getJSON() here: http://api.jquery.com/jquery.getjson/

Then you will need to use it to get your file's data and do something meaningful with it. (from the jQuery example page)

this might be a little advanced for you if you don't know much about JavaScript. Essentially what we're doing here is calling a function called getJSON and passing it two parameters, the first is where to get our JSON data, the second is another function that it will use once it successfully downloads the data (this is called a "callback" function). We will then pass that data into the success function. Inside that function each record will be looped over and the name and value will be pulled out and put inside an HTML string that is added to an array (items.push). When finished looping the whole items array is joined together into a single piece of HTML (html: items.join()) and appended to the body of the html.

$.getJSON( "content.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

Here's jsfiddle I found where someone has done something similar

http://jsfiddle.net/5pjha/

So far, this is the most helpful answer. thanks, I'll look into these a bit more. — user3698347, Jun 02 '14 at 07:34
Glad to help, don't forget to upvote the helpful answers here, and choose the answer when you're done investigating. — nhavar, Jun 02 '14 at 08:19

score -1 · Answer 6 · answered Jun 02 '14 at 07:11

var data = {
"number": "001",
"name": "Jill",
"date": "2014. January 01."
}

{
"number": "002",
"name": "John",
"date": "2014. March 03."
}

You can retrieve the data as follows:

data[0].number is 001
data[1].number is 002

data[0].name is Jill
data[1].name is John

data[0].date is 2014. January 01.
data[1].date is 2014. March 03.

Parsing JSON file and using it in HTML

6 Answers6