JSON先生と仲良くなりたい(初級編)

最近個人的な旅行で大分と京都、仙台の秋保温泉に行ってきました。 冬場の温泉旅行はぽっかぽかになるのでおすすめですよ! 今の時期だと東北の方は雪が毎日積もっているわけでもないので移動はしやすいのかなと思います。 是非とも行ってみてください!

今回は業務中にJsonParse等で躓いたのでそれを記事にしようかなと思います。

クエリパラメータをJSONに

最近の業務で他ページへのリンク遷移時にクエリパラメータを付けて渡すことで、初期表示にその値を参照するというものがありました。 とりあえず遷移用のURLを作らなきゃ始まらないので

このようにURLを生成しようと試みました。
そして共通処理でクエリパラメータがある場合、JSONへと変換を行って値を参照、あっさり解決かと思っていました…


さあいざ動作の確認だ!


…あれ?値が取れてない…
何故だとログを見ていると
conditions: "[object Object]"
"SyntaxError: Unexpected token o in JSON at position 1"
objectの文字列で取れてるみたいだしそもそもクエリパラメータも
?conditions=[object%20Object]
でダメダメでしたね…

とりあえずクエリパラメータを直さないことには始まらないのでここから直していきましょう
調べたところ、オブジェクト形式からJSON対応文字列に整形してくれるJSON.stringify()というメソッドがあったので使ってみます!

さてリンク先へ飛んでみるとクエリパラメータは…
?conditions={"ticket":4}
お、いいですね~! クエリパラメータを渡すことはできたので次は共通処理の整理ですね

最初のparseをした時点ではcondition:{ticket:4}というオブジェクトになっているので
Object.keys()メソッドでkeyを取り出して(Object.keysはkeyをすべてループで手に入れますが、今回はconditionsだけなので問題ないはず)
更にそこからオブジェクトを取り出していきます。

無事に取り出したオブジェクト(ticket:4)にJSON.parseをして返すことで、リンク先ページに値を渡すことができるようになります。
いざやってみたらJSON.parseする時数値以外は””で囲ってないとダメだったり変なとこで詰まってた記憶がひしひしと…
これで少しはJSON先生のこと知れたような気がします

※記事の内容は保証はしておりません(執筆時期や実施環境により挙動が変わるものがある為)。
別途検証してご利用いただくことをおすすめいたします。