HOME プログラミング JavaScript 【JavaScript】JSON文字列 or 配列からformを作成する方法
JavaScript

【JavaScript】JSON文字列 or 配列からformを作成する方法

  /

どうも、katです。

今回は、JavaScript上で、JSON文字列(String型)もしくは、配列から、簡単にformを作成し、submitする流れを説明していこうと思います。

ソースコード

先に、説明するよりも、ソースコードを見た方が早いかと思いますので、ソースコードを書いていきます。

・example.js

// JSON文字列から配列に変換
var strJson = '{"name":"hoge","pass":"piyo"}';

//配列に変換
var arrJson = JSON.parse(strJson);

var form = $('<form method="GET">');

$.each( arrJson, function( key, value ) {
  $('<input>').attr({
    'type':'hidden',
    'name':key,
    'value':value
  }).appendTo(form);
});
form.attr('action', 'detail').appendTo('body').submit();

以上です。

短いですね。

説明

ソースを読めば分かるくらい短い内容ではありますが、一応説明していきます。

まずは、JSON文字列ですが、ここでは「name」「pass」というキー名でパラメーターを定義しています。

文字列ではなく配列からformを作成する場合はここは飛ばします。

var strJson = '{"name":"hoge","pass":"piyo"}';

次に、配列に変換してます。

ここも同じく、元から配列の場合は飛ばします。

var arrJson = JSON.parse(strJson);

formを作成します。

var form = $('<form method="GET">');

$.each( arrJson, function( key, value ) {
  $('<input>').attr({
    'type':'hidden',
    'name':key,
    'value':value
  }).appendTo(form);
});

サブミットします。

form.attr('action', 'detail').appendTo('body').submit();

最後に

いかがだったでしょうか？

とても簡単ですね。

デフォルトでありそうでない機能で、正直色々な書き方ができる内容ではありますが、ライブラリなど使わずにやる一番簡単な方法ではないかと思います。

この機会に是非やってみてください。

以上、「JavaScriptでJSON文字列、配列からform作成」でした～。

More

it javascript 簡単
ABOUT ME
kat
プログラマー歴7年、2歳の子供を持つパパです。 興味のあることはプログラミングや今後のIT技術などです。 趣味でオンラインカードゲームのサイトを運営しております。 プログラミングを通して社会に貢献していきたいです。
こちらの記事もオススメです