I have a JSON file jsquiz.json that contains:

{
"firstname": "Kane",
"secondname": "Brown",
"sports": ["basketball","hockey"]
}

I have a separate file in the same directory jsquiz.html where I would like the information from the JSON file to be displayed:

...
<ul>
  <li id="first"></li>
  <li id="last"></li>
  <li id="sport1"></li>
  <li id="sport2"></li>
</ul>
...

From reading various sources I think I have to create a JavaScript object out of the JSON file using the .parse() method but I'm at a bit of a loss as to how I can import the JSON information from an external file?

Any help appreciated,

Thanks

I have a JSON file jsquiz.json that contains:

{
"firstname": "Kane",
"secondname": "Brown",
"sports": ["basketball","hockey"]
}

I have a separate file in the same directory jsquiz.html where I would like the information from the JSON file to be displayed:

...
<ul>
  <li id="first"></li>
  <li id="last"></li>
  <li id="sport1"></li>
  <li id="sport2"></li>
</ul>
...

From reading various sources I think I have to create a JavaScript object out of the JSON file using the .parse() method but I'm at a bit of a loss as to how I can import the JSON information from an external file?

Any help appreciated,

Thanks

• javascript
• json

Share Improve this question Follow asked Jan 20, 2014 at 9:17 KaneKane 92422 gold badges1212 silver badges2828 bronze badges 4

• 1 Have you tried anything? – Siva Charan Commented Jan 20, 2014 at 9:19
• I don't even know where to start with a JSON file. The first time I succeeded with using an object literal in an external javascript file. – Kane Commented Jan 20, 2014 at 9:20
• Retrieve the file using AJAX and then parse its content by using JSON.parse(). Then you can insert all values in your template and add it to the DOM. – Sirko Commented Jan 20, 2014 at 9:21
• So I can use AJAX to 'import' the file even if it is stored locally, and then use JSON.parse(). I think I get it, I'll have to look up AJAX – Kane Commented Jan 20, 2014 at 9:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can load data from a JSON file using an XMLHttpRequest.

This example will block until it is loaded:

var yourJSONObject = {} // will later be filled with the data
var req = new XMLHttpRequest();
req.open('GET', 'http://www.example./jsquiz.json', false); 
req.send(null);
if(req.status == 200) // 200 request status
  yourJSONObject = JSON.parse(req.responseText);
}

This example will load in the background:

var yourJSONObject = {} // will later be filled with the data
var req = new XMLHttpRequest();
req.open('GET', 'http://www.example./jsquiz.json', true); 
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
      yourJSONObject = JSON.parse(req.responseText);
  }
};
req.send(null); 

Unfortunately not all browsers allow XMLHttpRequest's to local files by default. Some browsers might need a little configuration change to be persuaded to allow it.

change the json file to be a valid js variable:

var jsonData = {
 "firstname": "Kane",
 "secondname": "Brown",
 "sports": ["basketball","hockey"]
}

then in your page :

<script src="jsquiz.json"></script>

now in your page after its loaded you can use a variable nameed jsonData

The problem is that you can't access local files so easily. You must either include that file in the page (like Exlord says), or export it over HTTP using some web server and load it using jQuery (like henje says) or directly (like Philipp).

If you have Python you could export the file using:

python -m SimpleHTTPServer 8000

(other tools can help you here also).

You could request the file with AJAX, as long as it is in your web directory (with JQuery)

$.ajax({url: "jsquiz.json",})
  .done(function(response) {
    data = JSON.parse(response);
    console.log(data);
  });

Then you only have to create a new DOMElement and add it.