如何解析本地JSON文件

我有一個包含一個JSON文件jsquiz.json：如何解析本地JSON文件

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

我在同一目錄jsquiz.html一個單獨的文件，我想從JSON文件中的信息將被顯示：

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

從如何我可以從外部導入JSON的信息，我想我必須創建一個JavaScript對象了使用.parse()方法JSON文件，但我在一個小的損失閱讀各種來源文件？

讚賞任何幫助，

感謝

來源

2014-01-20 Kane

你嘗試過什麼嗎？ –

我甚至不知道從哪裏開始使用JSON文件。第一次成功地在外部JavaScript文件中使用對象文字。 – Kane

使用AJAX檢索文件，然後使用'JSON.parse（）'解析其內容。然後，您可以在模板中插入所有值並將其添加到DOM。 – Sirko

您可以使用XMLHttpRequest從JSON文件加載數據。

這個例子將阻塞，直到它被加載：

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

這個例子將在後臺加載：

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

遺憾的是並不是所有的瀏覽器都支持XMLHttpRequest的本地文件默認情況下。一些瀏覽器可能需要一些配置更改才能被允許。

來源

2014-01-20 09:24:22 Philipp

你可以請求與AJAX的文件，只要它是在你的web目錄（用jQuery）

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

然後你只需要創建一個新的DOMElement並添加它。

來源

2014-01-20 09:22:53 henje

您似乎使用某種類型的庫。考慮到OP沒有提及任何庫，你應該提及使用這個例子需要哪一個。 – Philipp

直接在我發佈後，我自己認識到這一點，並補充說，是利用JQuery，但感謝提醒。 – henje

變化JSON文件是一個有效的JS變量：

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

在你的頁面

則：

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

現在

在你的頁面後，它的加載，你可以使用一個變量nameed jsonData

來源

2014-01-20 09:23:50 Exlord

這會被視爲JSON嗎？它不只是一個對象文字？ – Kane

當你加載一個js文件的內容被加載，因爲它們是這樣的是的jsonData是一個JSON對象 – Exlord

這種模式通常被稱爲「JSONP」（JSON與填充）。從不受控制的來源進行加載是相當危險的，但是當您信任來源時它是安全的。 – Philipp

問題是你不能如此輕鬆地訪問本地文件。您必須將該文件包含在頁面中（如Exlord所述），或者使用某個Web服務器通過HTTP將其導出並使用jQuery（如henje所述）或直接（如Philipp）加載它。

如果你有Python中，你可以使用導出的文件：

python -m SimpleHTTPServer 8000

（其他工具可以幫助你在這裏也）。

來源

2014-01-20 09:23:55

如何解析本地JSON文件

回答

相關問題