javascript解析json格式的數據方法詳解
JSON (JavaScript Object Notation)是一種簡單的數據格式,比xml更輕巧。 它是 JavaScript 原生格式,這意味著在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包。那么如何用JavaScript來解析json呢?
首先,科普一下json。在json中,有兩種結構:對象和數組。
一個對象以“{”(左括號)開始,“}”(右括號)結束。每個“名稱”后跟一個“:”(冒號);“‘名稱/值' 對”之間運用 “,”(逗號)分隔。 名稱用引號括起來;值如果是字符串則必須用括號,數值型則不須要。例如:
var o={“key”:”value”};
數組是值(value)的有序集合。一個數組以“[”(左中括號)開始,“]”(右中括號)結束。值之間運用 “,”(逗號)分隔。
var array = [{“name”:”tom”},{“name”:”jake”}];
在數據傳輸流程中,json是以字符串的形式傳遞的,而JS操作的是JSON對象,所以,JSON對象和JSON字符串之間的相互轉換是關鍵。
json字符串:var str='{“key”:”value”}';
json對象:var o={“key”:”value”};
1. json字符串轉化為json對象
可以通過JavaScript的eval()函數來進行解析,代碼如下:
<script type="text/javascript"> var json = '{"key":"value","jian":"zhi"}'; var obj = eval("(" + json + ")"); console.log(obj); //控制臺返回 Object console.log(obj.key); //控制臺返回 value console.log(obj.jian); //控制臺返回 zhi </script>
或者通過JSON.parse()方法來解析,代碼如下:
var json = '{"key":"value","jian":"zhi"}'; var obj =JSON.parse(json); console.log(obj); //控制臺返回 Object console.log(obj.key); //控制臺返回 value console.log(obj.jian); //控制臺返回 zhi
既然這兩種方法都可以解析json字符串,那么我們究竟使用哪種呢?在這之前,我們先來做一個測試:
var value = 1; var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}'; var json1 = eval('('+jsonstr+')'); console.log(json1); //控制臺返回 Object console.log('value: '+ value); //控制臺返回 value 2
我的天,evel方法竟然會執(zhí)行json字符串里的代碼??!
我們再看一下JSON.parse()方法:
var value = 1; var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}'; var json2 = JSON.parse(jsonstr); console.log(json2); console.log('value: '+ value); //控制臺報錯Unexpected token + in JSON at position
現在知道怎么選擇了吧。
eval()方法是極其不安全的,尤其是在解析第三方數據的時候,萬一第三方數據給你加點惡意代碼什么的你不就完了么?所以,JSON.parse()才是正確的選擇,當然,有些瀏覽器不支持這個方法,
可以到https://github.com/douglascrockford/JSON-js/blob/master/json2.js 下載json2.js,添加到你的hlml中就可以了。
除此之外還有一個 jsonStr.parseJSON()的方法,也可以將json字符串轉化為json對象,同樣需要json2.js包的支持。
2.json對象轉化為json字符串
話不多說,先看代碼:
var json = '{"key":"value","jian":"zhi"}'; var obj =JSON.parse(json); var str=JSON.stringify(obj); console.log(str); //控制臺返回 {"key":"value","jian":"zhi"}
這里我們用到了和JSON.parse(str) 相對應的方法JSON.stringify(obj)。
同樣,還有一個方法叫做obj.toJSONString()也可以將json對象轉化為json字符串,與 jsonStr.parseJSON()相對應。
3.json字符數組轉化為json數組
這個轉化和字符串轉對象是一樣的,只是操作json數組的方式與操作json對象的方式稍有不同而已??匆欢未a:
var arrayStr = '[{"name":"tom","age":"18"},{"name":"jake","age":"20"}]'; var arrayObj =JSON.parse(arrayStr); console.log(arrayObj); //控制臺返回 Array[2] console.log(arrayObj[0]); //控制臺返回 Object console.log(arrayObj[0].name); //控制臺返回 tom console.log(arrayObj[1].age); //控制臺返回 20
對于json數組,可以通過下標來進行訪問。由于它是一個數組,所以也可以通過for循環(huán)進行遍歷。
4.jquery解析json字符串
簡單地提一下jquery。在使用jquery的ajax功能時,有一個dataType屬性,可以將這個屬性設置為json或者利用$.getJSON()方法獲得服務器返回的值,這個返回值就是一個json對象,所以就不需要再做轉化。
當然,jquery也提供了轉換的函數 $.parseJSON(string); 這個和之前講的JSON.parse()得用法是一樣的,具體怎么使用,看個人喜好。
到此這篇關于javascript解析json格式的數據方法詳解的文章就介紹到這了,更多相關javascript解析json格式的數據內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript中的apply()方法和call()方法使用介紹
我們發(fā)現apply()和call()的真正用武之地是能夠擴充函數賴以運行的作用域,如果我們想用傳統(tǒng)的方法實現2012-07-07cropper.js和exif.js實現頭像上傳縮放裁剪旋轉
這篇文章主要為大家詳細介紹了cropper.js和exif.js實現頭像上傳縮放裁剪旋轉,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02JavaScript跳出循環(huán)的三種方法(break, return, continue)
這篇文章主要介紹了JavaScript跳出循環(huán)的三種方法(break, return, continue),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-07-07