1. 程式人生 > >JavaScript解析JSON資料

JavaScript解析JSON資料

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.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

以上方式中,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物件的方式稍有不同而已。看一段程式碼:

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迴圈進行遍歷。

4.jquery解析json字串

簡單地提一下jquery。在使用jquery的ajax功能時,有一個dataType屬性,可以將這個屬性設定為json或者利用$.getJSON()方法獲得伺服器返回的值,這個返回值就是一個json物件,所以就不需要再做轉化。  當然,jquery也提供了轉換的函式 $.parseJSON(string); 這個和之前講的JSON.parse()得用法是一樣的,具體怎麼使用,看個人喜好