-5

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.

Improve this question
8
  • 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. Commented Oct 18, 2015 at 19:23
  • This is not a valid JSON file. Commented Oct 18, 2015 at 19:25
  • But your data are not a valid JSON data ! minimum : missing a coma at the end of each line Commented Oct 18, 2015 at 19:25
  • 1
    Do you want to read a file from server or from client computer? Commented Oct 18, 2015 at 19:25
  • 1
    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 Commented Oct 18, 2015 at 19:26

2 Answers 2

Reset to default
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.

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

6 Comments

@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?
@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.
@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.
@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.
@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: stackoverflow.com/questions/4208530/…
|
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

Improve this answer

1 Comment

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?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.