JavaScript - Json オブジェクトのフラット化

はじめに:

Asp.net mvc フレームワークで複雑な Json オブジェクトを Action メソッドに送信するために Ajax メソッドを使用すると、いくつかの問題が発生します。ここでは、JavaScript を使用してこの問題を解決します。 3.0 この問題を解決するには JsonValueProviderFactory を使用しますが、ここでは純粋な JS を使用したこの問題の解決策を示します。このメソッドは mvc 2.0 の古いシステムでも使用できます。

次のオブジェクト構造のような複雑なオブジェクトを送信する必要があります:

1 {

2 ホテル名:'abc',

3 ホテル住所:' No. 72, Haidian Road, Beijing',

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

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

6 Hotelstar: 4

7}

8 // 現時点では、 Action オブジェクトのバックグラウンドに正しく送信されるようにするには、次の形式に変換する必要があります。

9

10

11 {

12 ホテル名:'abc',

13 ホテル住所:'No. 72, Haidian Road, Beijing',

14 部屋[0]: {部屋名:'スタンダード ルーム' ,roomPrice: 720},

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

16 HotelStar:4

17 }

18 //フォーマット変換コード:

19

20 var Convert= {

21 _jsonFlat:function (data,parentPro, returnObj) {

22 if (オブジェクトのデータインスタンス) {

23 for (データ内のvarpro) {

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); Convert._jsonFlat(proValue[i], pro + " [" + i +"] "、returnobj）;

33} convert。_jsonflat（provalue、parentpro +"

45 returnObj[parentPro + "." + プロ] = プロ値; 

46 else

47 returnObj[pro] =proValue; 

48

49 }

50 catch(e) { }; 

51 }

52 戻る; 

53 }

54 //その他、string/int/datetime 形式と同様

55 returnObj[parentPro] = data; 

56 },jsonFlat: function(data) {

57 //デバッガ; 

58 if(データ && オブジェクトのデータ インスタンス) {

59 varretObj = {}; 

60 Convert._jsonFlat(data, null, retObj); 

61 returnretObj; 

62 }

63 null を返します。 

64 },

65 }

解: 上記のコードは、Json オブジェクト形式の変換を完了します。変換後の Json オブジェクトは、後の台の Action メソッドにのみ渡されます。历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已经内置注册了JsonValueProvidエルファクトリー、その後、js を使用せずに、ajax メソッドを直接使用して扁平化を行うことができます: "controller/action",

data:{/*json データ*/},

contentType: "application/json",

success: function(){

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

}

});