JavaScript- Json对象扁平化

引子:

在Asp.net mvc 框架下用Ajax方法提交一个复杂的Json 对象到Action方法上, 会出现一些问题，这里我们用Javascript 的方式去解决这个问题，在asp.net mvc 3.0 后可以使用JsonValueProviderFactory解决这个问题，但在这里我们给出用纯js解决这个问题的方案,在mvc 2.0的老系统也可以使用这种方法。

需要提交一个复杂对象如以下对象结构:

 1 { 

 2 hotelName:’abc’, 

立即学习“Java免费学习笔记（深入）”；

 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; 

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

30

查看详情

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对象上的所有属性进行扁平化转换。

调用例子

view sourceprint?

1     $.ajax({

2       url: "controller/action",

3       data:Convert.jsonFlat({/*your json data*/}),

4       success: function(){

5         $(this).addClass("done");

6       }

7     });

在3.0以后Mvc已经内置注册了JsonValueProviderFactory, 然后就可以直接这样调用ajax方法而不需要用js进行扁平化了:　

但是这里需要注意的是contentType 必需设置成application/json.

view sourceprint?

$.ajax({

  url: "controller/action",

  data:{/*your json data*/},

  contentType: "application/json",

  success: function(){

    $(this).addClass("done");

  }

});