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

admin管理员组

文章数量:1389762

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.

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.

• javascript
• json
• parsing

Share Improve this question Follow edited Nov 21, 2013 at 23:10 Paul D. Waite 99k5757 gold badges203203 silver badges271271 bronze badges asked Nov 21, 2013 at 23:03 Brian LuiBrian Lui 2733 silver badges88 bronze badges 4

• Unless it's JSONP, referencing the file won't do much good, you need ajax. – 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 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 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 Commented Nov 21, 2013 at 23:08

Add a ment  | 

4 Answers 4

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

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.

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

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

本文标签： How can I read a json file without jQuery in JavaScriptStack Overflow