JavaScript で クエリストリング を 生成 する 方法

0 件のコメント

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;
};

サンプルコード の 使い方

上記サンプルコードは基本的にコピペで利用できます。

  1. 上記 サンプルコード を コピペ して適当な名前で保存します。 ここでは "serialize.js" として保存したものとします。
  2. 保存した "serialize.js" を利用するより前に読み込みます。 serialize メソッド が グローバル な領域に生成されているので、 この メソッド を利用します。
    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
    <!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 の フォロー」 お願いします!!