How can I read a .json file without jQuery in JavaScript?

Question

I am only asking the question because I've spent the last 2 days probably reading through countless other questions that are similar and tutorials and still can't get this to work.

I have a local .json file that I want to load up and parse with JavaScript. The file is called 'fakeData.json'. Its format is as such:

{"UIGroup": {"Parent": null, "Type": "public"}}

I'm using this to try to load the file:

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

I am using this to try to parse the file:

var jsonData = JSON.parse('fakeData.json');

I am getting these errors:

Uncaught SyntaxError: Unexpected token : fakeData.json:1
Uncaught SyntaxError: Unexpected token ILLEGAL : planetPage.html:11

May someone please help me, thanks.

Unless it's JSONP, referencing the file won't do much good, you need ajax. — adeneo
– adeneo, Commented Nov 21, 2013 at 23:04
How would I change my current JSON to a JSONP? I want to achieve this without the use of jquery, ajax, or anything else; basically as simple as it gets. — Brian Lui
– Brian Lui, Commented Nov 21, 2013 at 23:07
JSONP is a JavaScript program that consists of a function call (to a function that has to be defined elsewhere in the page) with one argument. — Quentin
– Quentin, Commented Nov 21, 2013 at 23:08
You can just change it to var myJSON = {"UIGroup": {"Parent": null, "Type": "public"}}, include the file before any scripts that use it, and reference it by the variable name. — adeneo
– adeneo, Commented Nov 21, 2013 at 23:08

tomdemuyt · Accepted Answer · 2013-11-21 23:10:53Z

3

If you want it as simple as it gets, then I would prefix your json content with

var jsonData = {"UIGroup": {"Parent": null, "Type": "public"}}....

which turns your file into a valid js file and then load it with

<script src="fakeData.json.js"></script>

after that, jsonData will have the required content because of literal object notation.

There is no way that you can load a json file into your page otherwise without ajax/httprequest.

answered Nov 21, 2013 at 23:10

tomdemuyt

4,5922 gold badges35 silver badges62 bronze badges

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

2 Comments

Brian Lui Over a year ago

Would I then be allowed to proceed to grab the values inside the fakeData.json.js file by say, by doing something such as: var obj = JSON.parse(jsonData); ?

tomdemuyt Over a year ago

The values are already assigned to jsonData, you could do var obj = jsonData; ;)

Quentin · Accepted Answer · 2013-11-21 23:05:55Z

1

You need to get the JSON text into a string variable before you can parse it.

This is generally achieved using the XMLHttpRequest object.

<script src="fakeData.json"></script> will attempt to parse the JSON as JavaScript. This will either throw an error (as it does in your case) or create a data structure and then immediately discard it as it isn't assigned there.

answered Nov 21, 2013 at 23:05

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Matthew Graves · Accepted Answer · 2013-11-21 23:09:12Z

1

var jsonData;
function reqListener () {
  jsonData = JSON.parse(this.responseText);
  console.log(jsonData);
};

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "fakeData.json", true);
oReq.send();

answered Nov 21, 2013 at 23:09

Matthew Graves

3,3141 gold badge19 silver badges20 bronze badges

3 Comments

Niet the Dark Absol Over a year ago

Assigning event handlers should be done after the call to open for maximum compatibility.

Brian Lui Over a year ago

I get this error: XMLHttpRequest cannot load file:///C:/Users/Brian/Documents/visualizer/test.json. Cross origin requests are only supported for HTTP. planetPage.html:19 (anonymous function)

Quentin Over a year ago

Yes, you need to use HTTP for most file stuff in browsers.

Jason · Accepted Answer · 2013-11-22 01:59:46Z

0

If you want to keep it all inline, with a JSON string, and access the object directly you could do something like this:

// copy all the JSON text from the file an keep store it in a local string variable. 
var jsonString = '{ "UIGroup": { "Parent": null, "Type": "public" }}';

// parse the string into a JavaScript object
var jsonObj = JSON.parse(jsonString);

// access the object as you usually would
alert(jsonObj.UIGroup.Type);

Fiddle

answered Nov 22, 2013 at 1:59

Jason

1,9791 gold badge16 silver badges19 bronze badges

Collectives™ on Stack Overflow

How can I read a .json file without jQuery in JavaScript?

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related