How to read a JSON file in Javascript

Question

I have a JSON file with following as sample contents

{
    "count": 1, 
    "timestamp": 1257033601, 
    "from": "theybf.com", 
    "to": "w.sharethis.com"
}
{
    "count": 1,
    "timestamp": 1257033601,
    "from": "",
    "to": "agohq.org"
}
{
    "count": 3, 
    "timestamp": 1257033601, 
    "from": "twistysdownload.com", 
    "to": "adserving.cpxinteractive.com"
}
{
    "count": 1, 
    "timestamp": 1257033601, 
    "from": "459.cim.meebo.com", 
    "to": "459.cim.meebo.com"
}
{
    "count": 1,
    "timestamp": 1257033601,
    "from": "boards.nbc.com",
    "to": "change.menelgame.pl"
}
{
    "count": 1,
    "timestamp": 1257033601,
    "from": "mail3-12.sinamail.sina.com.cn",
    "to": "mail3-12.sinamail.sina.com.cn"
}
{
    "count": 3,
    "timestamp": 1257033601,
    "from": "mediafire.com",
    "to": "tag.contextweb.com"
}

These contents are stored in file 'data.json'. I want to read this file and display its details through javascript on a HTML page.

Can someone help me understand how to do it? I am new to Javascript so need help here.

You'll need some kind of call to get the file (`AJAX`) - then you'll need to iterate the contents and display them. Since you're using `jQuery` - checkout the `$.getJSON` method. — tymeJV, Oct 18 '15 at 19:23
But your data are not a valid JSON data ! minimum : missing a coma at the end of each line — Anonymous0day, Oct 18 '15 at 19:25
Do you want to read a file from server or from client computer? — dotnetom, Oct 18 '15 at 19:25
That's not valid JSON. You would need to put the objects in an array. — Guffa, Oct 18 '15 at 19:25
There are lots of tutorials on this easily found on the web. This isn't a `how to` site. Start by learning what json is — charlietfl, Oct 18 '15 at 19:26
Possible duplicate of [How to use a JSON file in javascript](http://stackoverflow.com/questions/4828207/how-to-use-a-json-file-in-javascript) — Steve Clanton, Oct 18 '15 at 19:29
File is locally present on my computer and i want to read it from my local computer — Ketan Deopujari, Oct 18 '15 at 19:33

Fabian Valle · Answer 1 · 2015-10-19T00:07:58.930

2

You will need to perform an AJAX request. Here is how you do it using javascript:

var request = new XMLHttpRequest();

request.open('GET', 'temp.json', true);


request.onload = function(){ 
    if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
    console.log('data',data);
  } else {
    // We reached our target server, but it returned an error

  }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

The file temp.json should look like this:

[{"count": 1, "timestamp": 1257033601, "from": "theybf.com", "to": "w.sharethis.com"},
{"count": 1, "timestamp": 1257033601, "from": "", "to": "agohq.org"},
{"count": 3, "timestamp": 1257033601, "from": "twistysdownload.com", "to": "adserving.cpxinteractive.com"},
{"count": 1, "timestamp": 1257033601, "from": "459.cim.meebo.com", "to": "459.cim.meebo.com"},
{"count": 1, "timestamp": 1257033601, "from": "boards.nbc.com", "to": "change.menelgame.pl"},
{"count": 1, "timestamp": 1257033601, "from": "mail3-12.sinamail.sina.com.cn", "to": "mail3-12.sinamail.sina.com.cn"},
{"count": 3, "timestamp": 1257033601, "from": "mediafire.com", "to": "tag.contextweb.com"}]

You can easily verify the structure using http://jsonprettyprint.com/

This can also be done using jQuery using:

$.getJSON('temp.json', function(data) {
    console.log('data',data);
});

Hope this helps.

edited Oct 19 '15 at 00:07

answered Oct 18 '15 at 19:33

Fabian Valle

81
5

@FabinValle I used the above two approaches and it worked fine and I was able to read the data. However, I had to use the Apache Web server and then open the file through web server. Is there any way this can be accomplished without using a webserver? For instance, can I directly read the json file from my local machine directory and then read it or process it without using webserver? – Ketan Deopujari Oct 18 '15 at 21:47
@KetanDeopujari - You do not need an Apache webserver. If you split this into two files: one named index.html containing the HTML and javascript, and one named temp.json containing the JSON, the code should still work. – Fabian Valle Oct 19 '15 at 00:01
@KetanDeopujari - keep in mind javascript and html are both client-side technologies, this is why they do not require an Apache Webserver to be executed. – Fabian Valle Oct 19 '15 at 00:09
@FabinValle I am getting the following error when i try to execute the Javascript in browser without web server. XMLHttpRequest cannot load file:///C:/xampp/htdocs/testScripts/data.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – Ketan Deopujari Oct 19 '15 at 00:43
@KetanDeopujari - This is because Chrome does not allow cross-origin requests for the file:// protocol. If you test the same code in Firefox it should work. You may be interested in reading this: http://stackoverflow.com/questions/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-allow-origin-for-file – Fabian Valle Oct 19 '15 at 02:22
@KetanDeopujari - see also: http://stackoverflow.com/questions/2541949/problems-with-jquery-getjson-using-local-files-in-chrome – Fabian Valle Oct 19 '15 at 02:23

score 0 · Accepted Answer · answered Oct 18 '15 at 19:35

0

JSON refers to JavaScript Object Notation, which is a data interchange format. Your JSON is not properly formatted. A proper JSON object would look something like

[{"count": 1, "timestamp": 1257033601, "from": "theybf.com", "to": "w.sharethis.com"},{"count": 1, "timestamp": 1257033601, "from": "", "to": "agohq.org"}]

You can get the JSON from desired URL using $.getJSON(), like

$.getJSON( "Yoururl", function( data ) {})

You can then manipulate the data like data[0].count and use it as per your need

answered Oct 18 '15 at 19:35

Tushar Gupta

15,504
1
29
47

I used the above approache and it worked fine and I was able to read the data. However, I had to use the Apache Web server and then open the file through web server. Is there any way this can be accomplished without using a webserver? For instance, can I directly read the json file from my local machine directory and then read it or process it without using webserver? – Ketan Deopujari Oct 18 '15 at 21:51

How to read a JSON file in Javascript

2 Answers2