解析處理經常使用json數據總結

時間 2019-12-09

原文原文鏈接

工做中用ajax接收到接口返回的數據須要進行解析後操做，這裏總結一下平時的方法，用的jquery，複製下來的頁面把引入的路徑改一下便可。html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>json</title>
 6     <script src="../js/jquery-1.8.3.min.js"></script>
 7     <script>
 8         $(function(){
 9             //$.each循環公用方法
10             function eachJson(data){
11                 $.each(data, function(i, t){
12                     console.log(t.name);
13                 });
14             };
15 
16             //json數組格式
17             var dataArr = [{"name": "邸寶鬆", "age": 22}, {"name": "於海欣", "age": 22}]; 
18             eachJson(dataArr); //後臺返回json數組格式數據可直循環獲得內容
19 
20             //單條對象
21             var dataObj = {"name": "邸寶鬆", "age": 22}; 
22             console.log(dataObj.name); //對象格式的一條數據經過.直接輸出對象內容便可
23 
24             //多條對象
25             var datasObj = {"0": {"name":"邸寶鬆"}, "1": {"name":"於海欣"}};
26             eachJson(datasObj); 
27 
28             //（注意"{'name': '邸寶鬆', 'age': 22}"這種寫法只有eval()能處理成功。用$.parseJSON()最外面要用單引號哦^-^）
29             //單條字符串數據
30             var dataStr = '{"name": "邸寶鬆", "age": 22}'; //單條字符串格式   
31             console.log($.parseJSON(dataStr).name); //eval('('+dataStr+')'),不推薦用eval(),它不夠安全,假設json裏面有惡意代碼，那麼就完蛋了， 建議使用jquery的工具$.parseJSON()，固然還有一種js的方法JSON.parse()但它不支持IE６，７，還須要用其餘方式兼容。
32             
33             //多條字符串數據
34             var datasStr = '{"name": "邸寶鬆", "age": 22}, {"name": "於海欣", "age": 22}'; //多條字符串格式
35             eachJson($.parseJSON('['+datasStr+']')); //eval('['+dataStr+']')不推薦，理由同上
36             var datasStr2 = '"0": {"name":"邸寶鬆"}, "1": {"name":"於海欣"}';
37             eachJson($.parseJSON('{'+datasStr2+'}'));
38 
39             //複雜的對象數據
40             var dataObjs = {"status": 0, "inf": [{"name": "邸寶鬆", "age": 22}, {"name": "於海欣", "age": 22}]}; 
41             console.log(dataObjs.status);
42             eachJson(dataObjs.inf); //其實也就是多了一層對象而已，dataObjs.inf獲得的不就是json數組格式了嗎。
43         })
44     </script>
45 </head>
46 <body>
47 
48 </body>
49 </html>