我知道的JavaScript–Json對象扁平化

引子:

在Asp.net mvc 架構下用Ajax方法提交一個複雜的Json 對象到Action方法上, 會出現一些問題，這裡我們用Javascript 的方式去解決這個問題，在asp.net mvc 3.0 後可以使用JsonValueProviderFactory解決這個問題，但在這裡我們給出用純js解決這個問題的方案,在mvc 2.0的老系統也可以使用這種方法。

需要提交一個複雜物件如以下對象結構:

 1 {  
 2 hotelName:’abc’,  
 3 hotelAddress:’ 北京海澱路72號’,  
 4 Rooms:[ {roomName:’標準間’,roomPrice:720},  
 5                 {roomName:豪華間,roomPrice:1020}],  
 6 HotelStar:4  
 7 }  
 8 //這時我們必需轉換成如下格式才能正確提交到後台Action的對象上。
 9 
10 
11 {  
12 hotelName:’abc’,  
13 hotelAddress:’ 北京海澱路72號’,  
14 Rooms[0]: {roomName:’標準間’,roomPrice:720},  
15 Rooms[1]: {roomName:豪華間,roomPrice:1020},  
16 HotelStar:4  
17 }  
18 //格式轉碼:
19 
20 var Convert={
21 _jsonFlat:function (data, parentPro, returnObj) {  
22      if (data instanceof Object) {  
23 for (varpro in data) {  
24                 try{  
25                     varproValue = eval("data." +pro.toString());  
26                     if(proValue instanceof Array) {  
27                         for (var i = 0; i <proValue.length; i++) {  
28                             if (parentPro){  
29  Convert._jsonFlat(proValue[i], parentPro + "." + pro + "["+ i + "]", returnObj);  
30 }  
31                             else  
32                                         Convert._jsonFlat(proValue[i], pro + "[" + i + "]",returnObj);  
33                         }  
34                         continue;  
35                     }  
36                     if(proValue instanceof Object) {  
37                         if(parentPro)  
38                            Convert._jsonFlat(proValue, parentPro + "."+ pro, returnObj);  
39                         else  
40                            Convert._jsonFlat(proValue, pro, returnObj);  
41    
42                         continue;  
43                     }  
44                     if(parentPro)  
45                         returnObj[parentPro + "." + pro] = proValue;  
46                     else  
47                         returnObj[pro] =proValue;  
48    
49                 }  
50                 catch(e) { };  
51             }  
52             return;  
53         }  
54         //otherwiselike string/int/datetime format  
55         returnObj[parentPro] = data;  
56     },jsonFlat: function(data) {  
57         //debugger;  
58         if(data && data instanceof Object) {  
59             varretObj = {};  
60             Convert._jsonFlat(data, null, retObj);  
61             returnretObj;  
62         }  
63         return null;  
64     },  
65 }  

解釋:以上代碼就是完成Json對象格式的轉換,只有通過轉換後的複雜Json對象才能提交到背景Action 方法上。JsonFloat方法運用遞迴遍曆json對象上的所有屬性進行扁平化轉換。

調用例子

$.ajax({  url: "controller/action",  data:Convert.jsonFlat({/*your json data*/}),  success: function(){    $(this).addClass("done");  }});

在3.0以後Mvc已經內建註冊了JsonValueProviderFactory, 然後就可以直接這樣調用ajax方法而不需要用js進行扁平化了:　

但是這裡需要注意的是contentType 必需設定成application/json.

$.ajax({  url: "controller/action",  data:{/*your json data*/},  contentType: "application/json",  success: function(){    $(this).addClass("done");  }});

 

後記:

[分享今天的心情]：今天中午吃完飯，回來後到cnblogs閑逛,看了一個女生寫的演算法的貼子。驚歎一個女生也能對技術這麼執著，

這時被老闆(上司)看到,然後對著我說Robbin你不要天天抱著演算法至上的思想，看看我不懂演算法不照樣掙的比你多。

這時我也不敢回嘴可是心裡卻冒出一個畫面:

一個包工頭對著一個民工大聲喊:"不要以為你力氣大就掙得多，我沒你力氣大不是掙的比你多的多."

 

轉載請註明出處:http://www.cnblogs.com/RobbinHan/archive/2011/12/05/2270707.html 

本文作者: 十一月的雨 http://www.cnblogs.com/RobbinHan