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)文章
表格翻頁的實現(xiàn)方式有很多，下面以js為例為大家詳細(xì)介紹下表格翻頁效果的具體實現(xiàn)，感興趣的朋友可以參考下2013-08-08
JavaScript中解決多瀏覽器兼容性23個問題的快速解決方法
下面小編就為大家?guī)硪黄狫avaScript中解決多瀏覽器兼容性23個問題的快速解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
IE和Firefox在JavaScript應(yīng)用中的兼容性探討
今天在使用CSS屬性的時候發(fā)現(xiàn)"cursor:hand;"在Firefox中鼠標(biāo)不會變?yōu)槭中?，后來上網(wǎng)搜索了一下資料，發(fā)現(xiàn)hand這個cursor屬性在Firrefox中不兼容，使用"cursor:pointer"就都可以顯示了。2008-04-04
這篇文章主要給大家介紹了關(guān)于Webpack2中路徑配置的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要介紹了JavaScript中定義函數(shù)的三種方法,本文直接給出代碼實現(xiàn),同時給出了構(gòu)造函數(shù)的相關(guān)知識,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS實現(xiàn)字符串翻轉(zhuǎn)的方法,結(jié)合實例形式分析了javascript字符串使用reverse方法、字符串遍歷方法以及針對輸入字符串的遍歷、逆序輸出等方法實現(xiàn)字符串反轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
JavaScript如何使用Promise實現(xiàn)分批處理接口請求
當(dāng)我們在開發(fā)時遇到需要同時發(fā)起百條接口請求怎么辦呢,本文主要來和大家介紹一下JavaScript如何使用Promise實現(xiàn)分批處理接口請求,需要的可以參考下2024-03-03
JS表單驗證方法實例小結(jié)【電話、身份證號、Email、中文、特殊字符、身份證號等】
這篇文章主要介紹了JS表單驗證方法,結(jié)合實例形式總結(jié)分析了常用的表單驗證技巧,包括電話、身份證號、Email、中文、特殊字符、身份證號等驗證方法,需要的朋友可以參考下2017-02-02
前端請求全面解析之AJAX、Axios?與?Fetch的使用詳解與代碼示例
這篇文章主要介紹了前端請求全面解析之AJAX、Axios?與?Fetch的使用詳解與代碼示例,AJAX是早期的異步請求技術(shù),FetchAPI是現(xiàn)代的基于Promise的請求方案,Axios是第三方庫,支持自動轉(zhuǎn)換JSON、攔截器等功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
微信小程序swiper組件實現(xiàn)抖音翻頁切換視頻功能的實例代碼
這篇文章主要介紹了微信小程序swiper組件實現(xiàn)抖音翻頁切換視頻功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06