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