質問するログイン新規登録

回答編集履歴

2

別解を追加

2018/03/11 05:23

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -1,6 +1,8 @@
1
1
  `input`要素の抽出やJSONの生成まで自作するのはテストがしんどい気がします.
2
2
  なので, `form`要素を使った代替案を考えました.
3
3
 
4
+ 対処策・その1
5
+
4
6
  下記では`form`要素の「フォームデータ」(つまり, あるノードに含まれる`input`要素群の状態)をJSON化しています.
5
7
  (同名のラジオボタンを単一の`RadioNodeList`オブジェクトに勝手にまとめてくれるので処理がシンプル)
6
8
 
@@ -43,4 +45,23 @@
43
45
  ```
44
46
 
45
47
  NOTE:
46
- とは言え, `name`属性のとり方(誤った重複)などによってはうまく動きません.
48
+ とは言え, `name`属性のとり方(誤った重複)などによってはうまく動きません.
49
+
50
+ ---
51
+
52
+ 対処策・その2
53
+
54
+ jQueryの`serializeArray`メソッドを使う方法もあるようです.
55
+
56
+ 参考:
57
+ [https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data](https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data)
58
+
59
+ ```JavaScript
60
+ var formData = JSON.stringify($("#search_detail_panel").serializeArray());
61
+ console.log(formData);
62
+ ```
63
+ これを実行すると次のようなJSONが得られます.
64
+ ```JSON
65
+ [{"name":"panel_16","value":"3000"},{"name":"panel_17","value":"1"}]
66
+ ```
67
+ 最終的なJSONの形状があなたの求めている形と異なりますが, ここまでくれば後はデータの加工だけで済むでしょう.

1

何をするコードなのかについての補足を追加

2018/03/11 05:23

投稿

defghi1977
defghi1977

スコア4756

answer CHANGED
@@ -1,6 +1,8 @@
1
1
  `input`要素の抽出やJSONの生成まで自作するのはテストがしんどい気がします.
2
+ なので, `form`要素を使った代替案を考えました.
2
3
 
4
+ 下記では`form`要素の「フォームデータ」(つまり, あるノードに含まれる`input`要素群の状態)をJSON化しています.
3
- なので, `form`要素を使った代替案を考えました. (同名のラジオボタンを単一の`RadioNodeList`オブジェクトに勝手にまとめてくれるので処理がシンプル)
5
+ (同名のラジオボタンを単一の`RadioNodeList`オブジェクトに勝手にまとめてくれるので処理がシンプル)
4
6
 
5
7
  ```HTML
6
8
  <form id="form">