快捷導(dǎo)航

JavaScript解析JSON數(shù)據(jù)示例

更新時(shí)間：2019年07月16日 11:14:09 作者：愛在彩虹

這篇文章主要介紹了JavaScript解析JSON數(shù)據(jù),涉及javascript針對(duì)json格式數(shù)據(jù)的讀取、遍歷相關(guān)操作技巧,需要的朋友可以參考下

本文實(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

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript解析xml字符串的函數(shù)
在使用操作XML文件時(shí),我們可以使用Load方法直接加載xml文件即可，在ie和ff下通用。
2008-06-06
uni-app常用的幾種頁(yè)面跳轉(zhuǎn)方式總結(jié)
uni-app的頁(yè)面跳轉(zhuǎn)和小程序和vue很相似,只是方法和標(biāo)簽有所不同,這篇文章主要給大家介紹了關(guān)于uni-app常用的幾種頁(yè)面跳轉(zhuǎn)方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
escape、encodeURI 和 encodeURIComponent 的區(qū)別
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于編碼字符串的三個(gè)常用的方法，而他們之間的異同卻困擾了很多的Javascript初學(xué)者，今天我就在這里對(duì)這三個(gè)方法詳細(xì)地分析與比較一下。
2009-03-03
JavaScript仿小米官網(wǎng)注冊(cè)登錄功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript實(shí)現(xiàn)仿小米官網(wǎng)登錄注冊(cè)完整功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
JavaScript中Location.search處理使用方法
本文主要介紹了JavaScript中Location.search處理使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
這篇文章主要介紹了JS排序算法之冒泡排序，選擇排序與插入排序,結(jié)合實(shí)例形式分析了冒泡排序，選擇排序與插入排序的概念、原理及實(shí)現(xiàn)方法,需要的朋友可以參考下
2017-12-12