JavaScript解析JSON數(shù)據(jù)示例
本文實例講述了JavaScript解析JSON數(shù)據(jù)。分享給大家供大家參考，具體如下：
JSON數(shù)據(jù)是一種常用的數(shù)據(jù)格式，解析方式也比較簡單，特別是由于JavaScript原生就支持JSON，所以JavaScript能夠更好的解析JSON。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解析JSON</title>
<script>
// 開始解析
function startParse()
{
// ,{"字段2":{"地址2":"數(shù)據(jù)2"}}{"字段3":{"地址3":"數(shù)據(jù)3"}}
var jsonStr = '[{\"字段1\":{\"地址1\":\"數(shù)據(jù)1\"}},{\"字段2\":{\"地址2\":\"數(shù)據(jù)2\"}},{\"字段3\":{\"地址3\":\"數(shù)據(jù)3\"}}]';
var json = JSON.parse(jsonStr); // 將字符串轉(zhuǎn)換為JSON對象
// 循環(huán)遍歷獲取key -- value
for(var i = 0; i < json.length; i++){
// {"字段1":{"地址1":"數(shù)據(jù)1"}}
var itemJson = json[i];
// 再次遍歷獲取
for(var key in itemJson){
console.log(key);
// {"地址2":"數(shù)據(jù)2"}
var childItem = itemJson[key];
// 再次遍歷獲取
for (var keyItem in childItem) {
console.log(keyItem + " -- " + childItem[keyItem]);
}
}
}
}
</script>
</head>
<body>
<p>數(shù)據(jù)：</p>
<p>[{'字段1':{'地址1':'數(shù)據(jù)1'}},{'字段2':{'地址2':'數(shù)據(jù)2'}}{'字段3':{'地址3':'數(shù)據(jù)3'}}]</p>
<button type="button" onclick="startParse()">開始解析</button>
</body>
</html>
運行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
PS：關(guān)于json操作，這里再為大家推薦幾款比較實用的json在線工具供大家參考使用：
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json
JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
在使用操作XML文件時,我們可以使用Load方法直接加載xml文件即可，在ie和ff下通用。2008-06-06
uni-app常用的幾種頁面跳轉(zhuǎn)方式總結(jié)
uni-app的頁面跳轉(zhuǎn)和小程序和vue很相似,只是方法和標簽有所不同,這篇文章主要給大家介紹了關(guān)于uni-app常用的幾種頁面跳轉(zhuǎn)方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
escape、encodeURI 和 encodeURIComponent 的區(qū)別
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于編碼字符串的三個常用的方法，而他們之間的異同卻困擾了很多的Javascript初學(xué)者，今天我就在這里對這三個方法詳細地分析與比較一下。2009-03-03
JavaScript仿小米官網(wǎng)注冊登錄功能的實現(xiàn)
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)仿小米官網(wǎng)登錄注冊完整功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript中Location.search處理使用方法
本文主要介紹了JavaScript中Location.search處理使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
