JavaScript で オブジェクト を クエリ文字列 に変換（シリアライズ）する サンプルコード を作成しました。 以前書いた "JavaScript で クエリストリング を 取得 & 分解 & 整形 する 方法" に対応する コード になります。
目次
関連記事
生成 する サンプルコード
サンプルコード
/**
* 受け取ったオブジェクトをクエリ文字列にシリアライズします。
*
* サンプル オブジェクト
* 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 メソッドが グローバル な領域に生成されているので、 この メソッド を利用します。<!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
例えば、以下のような動作を行います。 受け取った オブジェクト を元に クエリストリング に展開される 文字列 を以下に示します。
受け取った オブジェクト
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