JavaScript で オブジェクト を クエリ文字列 に変換(シリアライズ)する サンプルコード を作成しました。 以前書いた "JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法" に対応する コード になります。
目次
関連記事
生成 する サンプルコード
サンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | /** * 受け取ったオブジェクトをクエリ文字列にシリアライズします。 * * サンプル オブジェクト * var query = { * action: 'view', * id: '123', * debug: undefined, * arraylist: [ * 'val1', * 'val2' * ], * hashlist: { * foo: 'foo', * bar: 'bar' * } * } * サンプル シリアライズ結果 * ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar */ var serialize = function (data) { var key, value, type, i, max; var encode = window.encodeURIComponent; var query = '?' ; for (key in data) { value = data[key]; type = typeof (value) === 'object' && value instanceof Array ? 'array' : typeof (value); switch (type) { case 'undefined' : // キーのみ query += key; break ; case 'array' : // 配列 for (i = 0, max = value.length; i < max; i++) { query += key + '[]' ; query += '=' ; query += encode(value[i]); query += '&' ; } query = query.substr(0, query.length - 1); break ; case 'object' : // ハッシュ for (i in value) { query += key + '[' + i + ']' ; query += '=' ; query += encode(value[i]); query += '&' ; } query = query.substr(0, query.length - 1); break ; default : query += key; query += '=' ; query += encode(value); break ; } query += '&' ; } query = query.substr(0, query.length - 1); return query; }; |
サンプルコード の 使い方
上記サンプルコードは基本的にコピペで利用できます。
- 上記 サンプルコード を コピペ して適当な名前で保存します。 ここでは "serialize.js" として保存したものとします。
- 保存した "serialize.js" を利用するより前に読み込みます。
serialize メソッド
が グローバル な領域に生成されているので、 この メソッド を利用します。1234567891011121314151617181920212223242526272829303132333435363738<!DOCTYPE html>
<
html
>
<
head
>
<
title
>QueryString サンプルコード</
title
>
<!-- コピペしたサンプルコードを実処理より前に読み込みます。1度だけで OK。 -->
<script type="text/javascript" src="./serialize.js">
</script>
<!-- 具体的な利用方法は… query オブジェクト へのアクセスで OK。 -->
<script type="text/javascript">
// クエリ文字列に変換したいオブジェクト
var
obj = {
'action'
:
'view'
,
'id'
:
'123'
,
'debug'
: undefined,
'arraylist'
: [
'val1'
,
'val2'
],
'hashlist'
: {
'foo'
:
'foo'
,
'bar'
:
'bar'
}
};
if
(console) {
// オブジェクトをクエリ文字列に変換します。
var
query = serialize(obj);
console.log(query);
// 以下のようなログが出力されます。
// LOG> ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar
}
</script>
</
head
>
<
body
>
</
body
>
</
html
>
対応している オブジェクト
今回、作成した サンプルコード では以下のような クエリストリング に対応しています。 いわゆる、上記 サンプルコード の仕様に相当します。 以前作成した クエリストリング→オブジェクト と対をなすものなので、基本的に仕様は同じです。
対応する クエリストリング の 種類
-
- 単純なキーバリュー
- 例:
?key=value
-
- キーのみ
- 例:
?key
-
- 配列
- 例:
?key[]=value0&key[]=value1
-
- ハッシュ
- 例:
?key[hoge]=hogevalue&key[foo]=foovalue
例えば、以下のような動作を行います。 受け取った オブジェクト を元に クエリストリング に展開される 文字列 を以下に示します。
受け取った オブジェクト
1 2 3 4 5 6 7 8 9 10 11 12 13 | var query = { action: 'view' , id: '123' , debug: undefined, arraylist: [ 'val1' , 'val2' ], hashlist: { foo: 'foo' , bar: 'bar' } } |
オブジェクト を元に生成する クエリストリング
1 | ?action=view&id=123&debug&arraylist[]=val1&arraylist[]=val2&hashlist[foo]=foo&hashlist[bar]=bar |
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!