PeaceJet

証券会社で証券外務員をやりながら、マーケティングやデータ分析・UI/UX改善などを行っています。

POST送信でオブジェクトをhiddenに格納して送信する方法

POST送信でJavascriptObjectが送信できない

こんにちは、PeaceJetです。
JavaScript Objectをhiddenに格納してPOST送信しようとしたところ、弾かれてしまったので調べてみました。

POSTの仕様

POST送信の仕様なのかわかりませんが、JavaScriptオブジェクトをhiddenに乗せて送信しようとすると```[Object object]```となってしまって、送信することが出来ないようです。
milkyshade.com

JavaScriptObjectをエンコード

そこで、JavaScriptオブジェクトをエンコードすることにしました。
以下の記事を参考に、jQueryを拡張しstringifyという関数を作成し、そちらで処理をすることにしました。
qiita.com

hash = {};
hash["チョコ"] = {
    "チップ",
    "コロネ"
};
hash["アンパン"] = {
    "マン",
    "チ"
};
$.stringify(hash);

このようにすれば、渡した先でも受け取れるようになります。
具体的には、以下のようにします。

var parse = JSON.parse(hash);
$.each(parse, function(index, elem){
  $("#result").append($("<p>").html(elem["チョコ"]))
  $("#result").append($("<p>").html(elem["アンパン"]))
})
// => チップ
// => コロネ
// => マン
// => チ

オブジェクトとは?

オブジェクトについて、そもそもなに?という方もいらっしゃるかもしれませんので、念のため調べてみました!

オブジェクトとは、プロパティ(※)を複数集めたもの集合のことです。変数配列もオブジェクトの一種に当たります。データを管理するのに非常に重要なものなので、是非覚えましょう。
※プロパティ…あらかじめ設定しておいた特定の情報(値)に、名前(プロパティ名)をつけたもの

https://techacademy.jp/magazine/5556

techacademy.jp

参考

以下の例を見てみると、複雑なJavaScriptオブジェクトになると、連想配列に階層が作られている様子がわかるかと思います。
www.weed.nagoya

/* ブログタイトルを取得 */