ダイナミックフォームからネストされたJSONを作成

Question

私はクライアント用のカスタムページビルダーを持っています。ドラッグアンドドロップバックエンドを使用して独自のWebフォームを構築できます。現時点で

、私は次のようなJSON形式で出力したデータを取得することができます。

{ 
    "email":"xx@yy.com", 
    "geoip_country":"XXYY", 
    "geoip_state":"XXYY", 
    "geoip_city":"XXYY", 
} 

をしかし、私は私が別のしたい、次の形式で出力を変更する必要がありますフォームからの電子メールのフィールドから、とdynamic_attributesセクション内にネストされた他のすべてのデータをドロップし、次のように：

{ 
    "email":"xx@yy.com", 
    "dynamic_attributes":{ 
     "geoip_country":"XXYY", 
     "geoip_state":"XXYY", 
     "geoip_city":"XXYY", 
     // all other form fields here. 

    }, 
} 

誰もが正しい方向に私を指すもらえますか？私は非常JSONを出力して経験していないよ - 私はまた、JSONには、次のjQueryの関数から作成されていることを追加する必要があります：

(function ($) { 
    $.fn.serializeFormJSON = function() { 

     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name]) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 
})(jQuery); 

参照フィドル：https://jsfiddle.net/fish_r/m46zLdo9/3/

感謝を！

Answer 1

はこれを試してみてください：

$('#myform').submit(function(e) { 
 
    e.preventDefault(); 
 
    var data = $(this).serializeFormJSON(); 
 
    console.log(data); 
 
}); 
 

 
(function ($) { 
 
    $.fn.serializeFormJSON = function() { 
 
\t \t 
 
     var o = {}; 
 
     var dynamic_attributes = {}; 
 
     var a = this.serializeArray(); 
 
     $.each(a, function() { 
 
      if (this.name =='email') { 
 
       if (o[this.name]) { 
 
        if (!o[this.name].push) { 
 
         o[this.name] = [o[this.name]]; 
 
        } 
 
        o[this.name].push(this.value || ''); 
 
       } else { 
 
        o[this.name] = this.value || ''; 
 
       } 
 
      } else { 
 
       if (dynamic_attributes[this.name]) { 
 
        if (!dynamic_attributes[this.name].push) { 
 
         dynamic_attributes[this.name] = [dynamic_attributes[this.name]]; 
 
        } 
 
        dynamic_attributes[this.name].push(this.value || ''); 
 
       } else { 
 
        dynamic_attributes[this.name] = this.value || ''; 
 
       } 
 
      } 
 
     }); 
 
     o['dynamic_attributes'] = dynamic_attributes; 
 
     
 
     return o; 
 
    }; 
 
})(jQuery);

.hidden {opacity:.3}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="POST" id="myform"> 
 
    <input type="text" name="name" placeholder="name"><br/> 
 
    <input type="email" name="email" placeholder="Enter your email"><br/> 
 
    <input type="text" name="address1" placeholder="Enter the first line of your address"><br/> 
 
    <input type="submit"> 
 
</form> 
 
<div id="output"></div>