如何在JavaScript中没有jQuery的情况下读取.json文件？

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.

Answer 1

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.

Answer 2

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.

Answer 3

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();

Answer 4

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