kawahara 最近個人的な旅行で大分と京都、仙台の秋保温泉に行ってきました。
冬場の温泉旅行はぽっかぽかになるのでおすすめですよ！
今の時期だと東北の方は雪が毎日積もっているわけでもないので移動はしやすいのかなと思います。
是非とも行ってみてください！
今回は業務中にJsonParse等で躓いたのでそれを記事にしようかなと思います。
クエリパラメータをJSONに
最近の業務で他ページへのリンク遷移時にクエリパラメータを付けて渡すことで、初期表示にその値を参照するというものがありました。
とりあえず遷移用のURLを作らなきゃ始まらないので
|
1 2 3 4 5 6 7 8 9 10 |
リンク元ページ computed: { request_query_url: function(){ var query_paramter = { ticket_number: this.hogehoge.ticket_number, } return '/honyahonya?conditions='+query_paramter; }, }, |
このようにURLを生成しようと試みました。
そして共通処理でクエリパラメータがある場合、JSONへと変換を行って値を参照、あっさり解決かと思っていました…
|
1 2 3 4 5 6 7 8 9 10 |
共通処理 import { parse } from 'querystring' window.url_query = function () { //ページのURLから?を除いたクエリパラメータを取得 var status = parse(location.search.slice(1)) status = JSON.parse(status) return status }; |
さあいざ動作の確認だ！
…あれ？値が取れてない…
何故だとログを見ていると
conditions: "[object Object]"
"SyntaxError: Unexpected token o in JSON at position 1"
objectの文字列で取れてるみたいだしそもそもクエリパラメータも
?conditions=[object%20Object]
でダメダメでしたね…
とりあえずクエリパラメータを直さないことには始まらないのでここから直していきましょう
調べたところ、オブジェクト形式からJSON対応文字列に整形してくれるJSON.stringify()というメソッドがあったので使ってみます！
|
1 2 3 4 5 6 7 8 9 10 11 |
リンク元ページ computed: { request_query_url: function(){ var query_paramter = { ticket_number: this.hogehoge.ticket_number, } request_paramter = JSON.stringify(query_paramter) return '/honyahonya?conditions='+request_paramter; }, }, |
さてリンク先へ飛んでみるとクエリパラメータは…
?conditions={"ticket":4}
お、いいですね～！
クエリパラメータを渡すことはできたので次は共通処理の整理ですね
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
共通処理 import { parse } from 'querystring' window.url_query = function () { //ページのURLから?を除いたクエリパラメータを取得 var status = parse(location.search.slice(1)) var status_key = Object.keys(status) status_key = status_key[0] var conditions = param[param_key] conditions = JSON.parse(conditions) return conditions }; |
最初のparseをした時点ではcondition:{ticket:4}というオブジェクトになっているので
Object.keys()メソッドでkeyを取り出して(Object.keysはkeyをすべてループで手に入れますが、今回はconditionsだけなので問題ないはず)
更にそこからオブジェクトを取り出していきます。
無事に取り出したオブジェクト(ticket:4)にJSON.parseをして返すことで、リンク先ページに値を渡すことができるようになります。
いざやってみたらJSON.parseする時数値以外は””で囲ってないとダメだったり変なとこで詰まってた記憶がひしひしと…
これで少しはJSON先生のこと知れたような気がします