如何在JavaScript中沒有jQuery的情況下讀取.json文件？

Question

我之所以只問這個問題，是因為我花了最后兩天閱讀了無數其他類似的問題和教程，但仍然無法解決這個問題。

我有一個本地.json文件，我想加載並使用JavaScript進行解析。 該文件稱為“ fakeData.json”。 其格式如下：

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

我正在使用它來嘗試加載文件：

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

我正在使用它嘗試解析文件：

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

我收到這些錯誤：

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

有人可以幫我，謝謝。

Answer 1

如果您希望它變得盡可能簡單，那么我將在您的json內容前添加前綴

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

這會將您的文件轉換為有效的js文件，然后使用

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

之后，由於文字對象表示法，jsonData將具有必需的內容。

如果沒有ajax / httprequest，則無法將json文件加載到頁面中。

Answer 2

您需要先將JSON文本轉換為字符串變量，然后才能對其進行解析。

通常使用XMLHttpRequest對象來實現。

<script src="fakeData.json"></script>將嘗試將JSON解析為JavaScript。 這將拋出一個錯誤（如您的情況），或者創建一個數據結構，然后立即將其丟棄（因為未分配該結構）。

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

如果要使用JSON字符串將其全部內聯，並直接訪問對象，則可以執行以下操作：

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

小提琴