JavaScript- Json object flattening

Introduction:

When using Ajax method to submit a complex Json object to the Action method under the Asp.net mvc framework, some problems will occur. Here we use Javascript to solve this problem. It can be solved after asp.net mvc 3.0 Use JsonValueProviderFactory to solve this problem, but here we give a solution to this problem using pure js. This method can also be used in the old system of mvc 2.0.

You need to submit a complex object such as the following object structure:

1 {

2 hotelName:'abc',

3 hotelAddress:' No. 72, Haidian Road, Beijing',

4 Rooms:[ {roomName:'Standard Room ', root: 720},

5 {RoomName: luxury room, roomprice: 1020}],

6 Hotelstar: 4

7}

8 // At this time, we must be converted to the following format to be properly submitted to the background to the background on the Action object.

9

10

11 {

12 hotelName:'abc',

13 hotelAddress:' No. 72, Haidian Road, Beijing',

14 Rooms[0]: {roomName:'Standard Room',roomPrice: 720},

15 Rooms[1]: {roomName:Deluxe Room,roomPrice:1020},

16 HotelStar:4

17 }

18 //Format conversion code:

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

28 If (parentPro){

29 Convert._jsonFlat(proValue[i], parentPro + "." + pro + "["+ i + "]", returnObj);

30 }                                                                 Convert._jsonFlat(proValue[i], pro + "[" + i + "]",returnObj);

33                                                                                                                                                                                                                                              ​ Convert. _jsonFlat(proValue, parentPro + "."+ pro, returnObj);

39                                                                                                                                                                                .

41 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");

  }

});