JavaScriptオブジェクトのクエリ文字列エンコーディング


481

リクエストstringを介して渡すことができるJavascriptオブジェクトをにエンコードする高速で簡単な方法を知っていますかGET

いいえjQuery、他のフレームワークはありません-単なるJavascript :)


ソリューションに適切なものがある場合、JQueryがソリューションにならないのはなぜですか?
eaglei22 2017年

@ eaglei22当時、私はIPTVセットトップボックスデバイスのプロジェクトに取り組んでおり、外部ライブラリは許可されていませんでした。;-)
napolux 2017年

1
ご回答ありがとうございます。私はこの仕様を時々見ますが、なぜそのシナリオを常に疑問に思っていました。さて、今、私はそれを手に入れました、ありがとう!:)
eaglei22 2017年

9
@ eaglei22 idで1つの要素を取得するために大きなライブラリをロードしたくない場合があるためです。
アーロンハルン

ほとんどのブラウザがURLSearchParams現在サポートしています...
mb21

回答:


810

このような?

serialize = function(obj) {
  var str = [];
  for (var p in obj)
    if (obj.hasOwnProperty(p)) {
      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
    }
  return str.join("&");
}

console.log(serialize({
  foo: "hi there",
  bar: "100%"
}));
// foo=hi%20there&bar=100%25

編集:これは再帰オブジェクトも変換します(クエリ文字列にphpの「配列」表記を使用)

serialize = function(obj, prefix) {
  var str = [],
    p;
  for (p in obj) {
    if (obj.hasOwnProperty(p)) {
      var k = prefix ? prefix + "[" + p + "]" : p,
        v = obj[p];
      str.push((v !== null && typeof v === "object") ?
        serialize(v, k) :
        encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
  }
  return str.join("&");
}

console.log(serialize({
  foo: "hi there",
  bar: {
    blah: 123,
    quux: [1, 2, 3]
  }
}));
// foo=hi%20there&bar%5Bblah%5D=123&bar%5Bquux%5D%5B0%5D=1&bar%5Bquux%5D%5B1%5D=2&bar%5Bquux%5D%5B2%5D=3


2
{foo:[1,2,3]、bar: "100%"}を指定すると壊れませんか?
クエンティン

1
@Ofri:受信するように設定されているサーバーへのPOSTリクエストの場合、JSONが適切な選択です。GETリクエストの場合、いくつかの単純なパラメーター以外のものをサーバーに送信すると、設計が間違っている可能性があります。
Tim Down

2
@Marcelこれは、関数がhasOwnPropertyをチェックしないためです。私はあなたのフィドルを更新したので、今はそれを行います:jsfiddle.net/rudiedirkx/U5Tyb/1
Rudie

1
@TimDown GETリクエストで単純なパラメータを送信するコメントについて。私は同意しない。パラメータを配列にグループ化すると、サーバー側のPHPが安定した連想配列を見つけるので便利です。これがデザインとして間違っている理由がわかりません。
Savas Vedova 2015年

1
「if(obj.hasOwnProperty(prop))」は必要ですか?for inステートメントはオブジェクトのプロパティをループするだけなので、hasOwnPropertyの呼び出しは常にtrueと評価されます
Arnon

231

jQueryにはこのための関数があり、jQuery.param()すでに使用している場合は、それを使用できます。http//api.jquery.com/jquery.param/

例:

var params = { width:1680, height:1050 };
var str = jQuery.param( params );

str 今含まれています width=1680&height=1050


119
Napolux(OP)を引用すると、「単なるプレーンJavaScript」です。:P
Sk8erPeter

6
jQuery.param()は不吉な動作をします。var a = [];を実行してみてください。a [2564] = 12; console.log(jQuery.param({propertylist:a})); 私が何を意味するかを確認します。
akond 2013

13
@akond jQueryのドキュメントには、ベアアレイを渡してはいけないと具体的に記載されています。
アリエル

4
@アリエル彼は裸の配列を渡していない。彼は証明するために、インデックス2564.で一つの値だけを持つ配列を渡しています: var a = []; a[5] = 'foo'; jQuery.param({ parameters: a }); 結果をに"parameters[]=&parameters[]=&parameters[]=&parameters[]=&parameters[]=&parameters[]=foo"。これは正しいのですが、あなたが期待するものではないかもしれません。
Chris Hall、

4
質問は、特にバニラJSを求めている
バグハンター219

190

ただ、使用URLSearchParamsこの現在のすべてのブラウザで動作します

new URLSearchParams(object).toString()

5
いいえ、それは再帰的なオブジェクトを実行しないためです
Eddie Monge Jr

ネストされたオブジェクトでは機能しません。let j = { m: 5, n: { k: 1 } }; new URLSearchParams(j).toString(); // result "m=5&n=%5Bobject+Object%5D"
hitautodestruct

19
@EddieMongeJrクエリ文字列は、設計上、キーと値のペアです。ネストされたオブジェクトをシリアル化する必要すらありません。この答えは、最新の方法です。賛成票が必要です。
Romain Durand

5
はい、それらはキーと値のペアですが、値を文字列エンコードされたオブジェクトにすることはできないということは何もありません。また、元の質問では、ネストされたプロパティを持つことができる「JavaScriptオブジェクトから文字列」を要求しています
Eddie Monge Jr

@EddieMongeJrは、受け入れられた回答(および簡単に調べた後の回答)でも、ネストされたオブジェクトをサポートしていません。次のことができstringify、あなたがすることができます前に、ネストされたオブジェクトをURLSearchParams
モッシュFEU

128
Object.keys(obj).reduce(function(a,k){a.push(k+'='+encodeURIComponent(obj[k]));return a},[]).join('&')

編集:私はこのワンライナーが好きですが、意味的に受け入れられた回答と一致した場合、より人気のある回答になると思います:

function serialize( obj ) {
    let str = '?' + Object.keys(obj).reduce(function(a, k){
        a.push(k + '=' + encodeURIComponent(obj[k]));
        return a;
    }, []).join('&');
    return str;
}

1
ただし、reduct関数専用の行を使用すると、読みやすさが大幅に向上します。
Aurelien Ribon

54
代わりに.reduceの.MAPを()()を使用すると、さらに簡単になります: Object.keys(obj).map(k => k + '=' + encodeURIComponent(obj[k])).join('&')
Jannes

2
これObject.keysはIEでのみ利用可能です> = 9
Johnston

5
連結の代わりにES6テンプレートを使用してさらに改善された@JannesコードObject.keys(obj).map(k => `${k}=${encodeURIComponent(obj[k])}`).join('&')
csilk

1
キーがencodeUriComponentri️も必要な場合: Object.entries(obj).map(e => e.map(ee => encodeURIComponent(ee)).join('=')).join('&');
Blaise

112

ES6のワンライナーは次のとおりです。

Object.keys(obj).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`).join('&');

kとキーを交換してください。金色です
Jamie Kudla

17
警告!これは浅いオブジェクトでのみ機能します。別のオブジェクトであるトップレベルのプロパティがある場合、この1つのライナーは「key =%5Bobject%20Object%5D」を出力します。ちょうどヘッドアップとして。
Andrew Allbright

4
また、これは配列を吐き出しません。ひどい基準があるexport?actions[]=finance,create,editべき時に私はそれを得たexport?actions[]=finance&actions[]=create&actions[]=edit
darkbluesun 2016

3
URL引数は仕様に関する限り文字列にすぎないため、配列はほとんど常に「自分自身」です。そのため、単一の文字列でないものはサーバーによって正しく読み取られるようになっています。あなたが呼んでいます。actions[]PHP表記です。Djangoはaction代わりに複数を使用します([]サフィックスなし)。他のいくつかのORM / CMSは、コンマ区切りのリストなどを必要とします。したがって、「単純な文字列でない場合は、まずサーバーが何を望んでいるかを確認してください」。
マイク 'Pomax'カマーマンズ2017年

非常にエレガントなソリューション!
Anh Tran、

51

Node.js v6.6.3

const querystring = require('querystring')

const obj = {
  foo: 'bar',
  baz: 'tor'
}

let result = querystring.stringify(obj)
// foo=bar&baz=tor

リファレンス:https : //nodejs.org/api/querystring.html


8
これはIMOに反対票を投じるべきではありません。それがサーバー上のJSである場合、これは正しい答えです。
Michael Benin

4
ネストされたオブジェクトをサポートしていないようです。
Yarin Gold 2017

43

URLSearchParamsインターフェイスを使用することをお勧めします:

const searchParams = new URLSearchParams();
const search = {foo: "hi there", bar: "100%" };
Object.keys(search).forEach(key => searchParams.append(key, search[key]));
console.log(searchParams.toString())

または、次のように検索オブジェクトをコンストラクタに渡します。

const obj = {foo: "hi there", bar: "100%" };
const params = new URLSearchParams(obj).toString();

1
興味深い提案ですが、この機能に対するブラウザのサポートはまだ非常にパッチが多いことに注意してください。
mrec 2018

IE(これはかなり一般的です)と特定のモバイルバージョンをサポートしない場合は、プレーンなJavaScriptであるため、これが最良の答えです。
Marcos Sandrini、

24

user187291によって承認されたソリューションの小さな修正:

serialize = function(obj) {
   var str = [];
   for(var p in obj){
       if (obj.hasOwnProperty(p)) {
           str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
       }
   }
   return str.join("&");
}

オブジェクトのhasOwnPropertyをチェックすると、JSLint / JSHintが幸せになり、オブジェクトが単純なディクショナリ以外のものである場合に、オブジェクトのメソッドまたはその他のものを誤ってシリアル化することを防ぎます。このページのforステートメントの段落を参照してください:http : //javascript.crockford.com/code.html


14

まあ、誰もが彼のワンライナーをここに置いているようですので、ここに私のものを行きます:

const encoded = Object.entries(obj).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join("&");

1
Object.entriesはIEではサポートされていません。
MBouwman

@MBouwmanもちろん、IEは善悪を超えて壊れています。そのため、babel / core-jsを使用する必要があります
chpio

@chpio Babel / core-jsは、私が正しい場合、Object.entriesをサポートしていません。
MBouwman

コアはObject.entriesをサポートしていますgithub.com/zloirock/core-js/blob/master/...ランタイムバベルcorejs2も古い変換をサポートしています、それだけでなくgithub.com/babel/babel/blob/...
chpio

12

任意のオブジェクトを送信する必要がありますか?もしそうなら、ユーザーエージェントとウェブサーバーが受け入れるURLの長さに制限があるので、GETは悪い考えです。私の提案は、送信する名前と値のペアの配列を作成してから、クエリ文字列を作成することです。

function QueryStringBuilder() {
    var nameValues = [];

    this.add = function(name, value) {
        nameValues.push( {name: name, value: value} );
    };

    this.toQueryString = function() {
        var segments = [], nameValue;
        for (var i = 0, len = nameValues.length; i < len; i++) {
            nameValue = nameValues[i];
            segments[i] = encodeURIComponent(nameValue.name) + "=" + encodeURIComponent(nameValue.value);
        }
        return segments.join("&");
    };
}

var qsb = new QueryStringBuilder();
qsb.add("veg", "cabbage");
qsb.add("vegCount", "5");

alert( qsb.toQueryString() );

11

Rails / PHPスタイルのクエリビルダー

このメソッドは、JavaScriptオブジェクトをに変換しますURI Query String。ネストされた配列とオブジェクトも処理します(Rails/ PHP構文):

function serializeQuery(params, prefix) {
  const query = Object.keys(params).map((key) => {
    const value  = params[key];

    if (params.constructor === Array)
      key = `${prefix}[]`;
    else if (params.constructor === Object)
      key = (prefix ? `${prefix}[${key}]` : key);

    if (typeof value === 'object')
      return serializeQuery(value, key);
    else
      return `${key}=${encodeURIComponent(value)}`;
  });

  return [].concat.apply([], query).join('&');
}

使用例:

let params = {
  a: 100,
  b: 'has spaces',
  c: [1, 2, 3],
  d: { x: 9, y: 8}
}

serializeQuery(params)
// returns 'a=100&b=has%20spaces&c[]=1&c[]=2&c[]=3&d[x]=9&d[y]=8

いい例です。回答のタイプミスを修正しました。あなたが編集している場合ちなみに、興味深いものになるだろうfunction除外するfalsy値(ヌル、未定義は、NaN、「」)...
developer033

8

JSONを使用します。

実装方法のアイデアについては、この質問をご覧ください。


2
彼がサーバーを何で書いているのかはわかりませんが、最近のほとんどの言語には、JSONを読み取る優れたパッケージがあります。その上、彼がそれを実装することになったとしても、独自の新しいエンコーディングスキームを発明するよりも、JSON読み取りサーバーコードを実装する方が良いです。このようなDIYエンコーディングはバグが多い傾向にあります(通常、値自体が配列であるなど、考えられるすべてのケースを考えているわけではないためです)。
Ofri Raviv

基本的に、オブジェクトをJSONに変換し、JSON文字列全体を単一のGETクエリパラメーターとしてサーバーに渡すことをお勧めしていますか?
Marco Demaio、

8

これが受け入れられた回答のコーヒースクリプトバージョンです。これにより、時間を節約できます。

serialize = (obj, prefix) ->
  str = []
  for p, v of obj
    k = if prefix then prefix + "[" + p + "]" else p
    if typeof v == "object"
      str.push(serialize(v, k))
    else
      str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v))

  str.join("&")

ありがとうalfonso!本当に私の時間を節約しました!
Lukas 2013年

6

Object.entriesを使用した簡潔で再帰的なバージョンを次に示します。任意にネストされた配列を処理しますが、ネストされたオブジェクトは処理しません。また、空の要素を削除します。

const format = (k,v) => v !== null ? `${k}=${encodeURIComponent(v)}` : ''

const to_qs = (obj) => {
    return [].concat(...Object.entries(obj)
                       .map(([k,v]) => Array.isArray(v) 
                          ? v.map(arr => to_qs({[k]:arr})) 
                          : format(k,v)))
           .filter(x => x)
           .join('&');
}

例えば:

let json = { 
    a: [1, 2, 3],
    b: [],              // omit b
    c: 1,
    d: "test&encoding", // uriencode
    e: [[4,5],[6,7]],   // flatten this
    f: null,            // omit nulls
    g: 0
};

let qs = to_qs(json)

=> "a=1&a=2&a=3&c=1&d=test%26encoding&e=4&e=5&e=6&e=7&g=0"

このバージョンは、ネストされた配列を処理するときに私に役立ちました。Ruby / PHPスタイルの配列キーを使用するように微調整を行いましたが、それ以外の点ではうまく機能します。
nickb 2018年

5

これはnull /未定義の値をスキップします

export function urlEncodeQueryParams(data) {
    const params = Object.keys(data).map(key => data[key] ? `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}` : '');
    return params.filter(value => !!value).join('&');
}

5

ES7では、これを1行で記述できます。

const serialize = (obj) => (Object.entries(obj).map(i => [i[0], encodeURIComponent(i[1])].join('=')).join('&'))

4

誰かが再び必要になった場合に備えて、オブジェクトをクエリ文字列に変換する1行

let Objs = { a: 'obejct-a', b: 'object-b' }

Object.keys(objs).map(key => key + '=' + objs[key]).join('&')

// result will be a=object-a&b=object-b

4

サードパーティのライブラリを使用せず、 "Object.keys"を持つすべてのブラウザー(別名、すべての最新ブラウザー+エッジ+ ie)で既に使用されている簡単なソリューションがあります。

ES5内

function(a){
    if( typeof(a) !== 'object' ) 
        return '';
    return `?${Object.keys(a).map(k=>`${k}=${a[k]}`).join('&')}`;
}

ES3内

function(a){
    if( typeof(a) !== 'object' ) 
        return '';
    return '?' + Object.keys(a).map(function(k){ return k + '=' + a[k] }).join('&');
}

3

ネストされたオブジェクトを再帰的に変換する必要があり、オブジェクトに配列が含まれている場合と含まれていない場合(配列にはオブジェクトや配列が含まれている場合があります)、ソリューションは少し複雑になります。これが私の試みです。

また、メインオブジェクトのどの深さにオブジェクトメンバーを配置するかを記録するかどうか、および変換された配列からのメンバーにラベルを追加するかどうかを選択するオプションもいくつか追加しました。

理想的には、thingパラメーターが実際にオブジェクトまたは配列を受け取るかどうかをテストする必要があります。

function thingToString(thing,maxDepth,recordLevel,markArrays){
    //thing: object or array to be recursively serialized
    //maxDepth (int or false):
    // (int) how deep to go with converting objects/arrays within objs/arrays
    // (false) no limit to recursive objects/arrays within objects/arrays
    //recordLevel (boolean):
    //  true - insert "(level 1)" before transcript of members at level one (etc)
    //  false - just 
    //markArrays (boolean):
    //  insert text to indicate any members that came from arrays
    var result = "";
    if (maxDepth !== false && typeof maxDepth != 'number') {maxDepth = 3;}
    var runningDepth = 0;//Keeps track how deep we're into recursion

    //First prepare the function, so that it can call itself recursively
    function serializeAnything(thing){
        //Set path-finder values
        runningDepth += 1;
        if(recordLevel){result += "(level " + runningDepth + ")";}

        //First convert any arrays to object so they can be processed
        if (thing instanceof Array){
            var realObj = {};var key;
            if (markArrays) {realObj['type'] = "converted array";}
            for (var i = 0;i < thing.length;i++){
                if (markArrays) {key = "a" + i;} else {key = i;}
                realObj[key] = thing[i];
            }
            thing = realObj;
            console.log('converted one array to ' + typeof realObj);
            console.log(thing);
        }

        //Then deal with it
        for (var member in thing){
            if (typeof thing[member] == 'object' && runningDepth < maxDepth){
                serializeAnything(thing[member]);
                //When a sub-object/array is serialized, it will add one to
                //running depth. But when we continue to this object/array's
                //next sibling, the level must go back up by one
                runningDepth -= 1;
            } else if (maxDepth !== false && runningDepth >= maxDepth) {
                console.log('Reached bottom');
            } else 
            if (
                typeof thing[member] == "string" || 
                typeof thing[member] == 'boolean' ||
                typeof thing[member] == 'number'
            ){
                result += "(" + member + ": " + thing[member] + ") ";
            }  else {
                result += "(" + member + ": [" + typeof thing[member] + " not supported]) ";
            }
        }
    }
    //Actually kick off the serialization
    serializeAnything(thing);

    return result;

}

再帰的なアプローチをありがとう
シャーロック

3

受け入れられたソリューションの追加、これはオブジェクトとオブジェクトの配列で動作します:

parseJsonAsQueryString = function (obj, prefix, objName) {
    var str = [];
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            var v = obj[p];
            if (typeof v == "object") {
                var k = (objName ? objName + '.' : '') + (prefix ? prefix + "[" + p + "]" : p);
                str.push(parseJsonAsQueryString(v, k));
            } else {
                var k = (objName ? objName + '.' : '') + (prefix ? prefix + '.' + p : p);
                str.push(encodeURIComponent(k) + "=" + encodeURIComponent(v));
                //str.push(k + "=" + v);
            }
        }
    }
    return str.join("&");
}

asp.net mvcアクションメソッドのようにオブジェクトパラメータを使用している場合は、objNameも追加しました。


3

少しよく見える

objectToQueryString(obj, prefix) {
    return Object.keys(obj).map(objKey => {
        if (obj.hasOwnProperty(objKey)) {
            const key = prefix ? `${prefix}[${objKey}]` : objKey;
            const value = obj[objKey];

            return typeof value === "object" ?
                this.objectToQueryString(value, key) :
                `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
        }

        return null;
    }).join("&");
}

3

私が作ったJSON stringifiersの比較をし、結果は以下の通りであります:

JSON:    {"_id":"5973782bdb9a930533b05cb2","isActive":true,"balance":"$1,446.35","age":32,"name":"Logan Keller","email":"logankeller@artiq.com","phone":"+1 (952) 533-2258","friends":[{"id":0,"name":"Colon Salazar"},{"id":1,"name":"French Mcneil"},{"id":2,"name":"Carol Martin"}],"favoriteFruit":"banana"}
Rison:   (_id:'5973782bdb9a930533b05cb2',age:32,balance:'$1,446.35',email:'logankeller@artiq.com',favoriteFruit:banana,friends:!((id:0,name:'Colon Salazar'),(id:1,name:'French Mcneil'),(id:2,name:'Carol Martin')),isActive:!t,name:'Logan Keller',phone:'+1 (952) 533-2258')
O-Rison: _id:'5973782bdb9a930533b05cb2',age:32,balance:'$1,446.35',email:'logankeller@artiq.com',favoriteFruit:banana,friends:!((id:0,name:'Colon Salazar'),(id:1,name:'French Mcneil'),(id:2,name:'Carol Martin')),isActive:!t,name:'Logan Keller',phone:'+1 (952) 533-2258'
JSURL:   ~(_id~'5973782bdb9a930533b05cb2~isActive~true~balance~'!1*2c446.35~age~32~name~'Logan*20Keller~email~'logankeller*40artiq.com~phone~'*2b1*20*28952*29*20533-2258~friends~(~(id~0~name~'Colon*20Salazar)~(id~1~name~'French*20Mcneil)~(id~2~name~'Carol*20Martin))~favoriteFruit~'banana)
QS:      _id=5973782bdb9a930533b05cb2&isActive=true&balance=$1,446.35&age=32&name=Logan Keller&email=logankeller@artiq.com&phone=+1 (952) 533-2258&friends[0][id]=0&friends[0][name]=Colon Salazar&friends[1][id]=1&friends[1][name]=French Mcneil&friends[2][id]=2&friends[2][name]=Carol Martin&favoriteFruit=banana
URLON:   $_id=5973782bdb9a930533b05cb2&isActive:true&balance=$1,446.35&age:32&name=Logan%20Keller&email=logankeller@artiq.com&phone=+1%20(952)%20533-2258&friends@$id:0&name=Colon%20Salazar;&$id:1&name=French%20Mcneil;&$id:2&name=Carol%20Martin;;&favoriteFruit=banana
QS-JSON: isActive=true&balance=%241%2C446.35&age=32&name=Logan+Keller&email=logankeller%40artiq.com&phone=%2B1+(952)+533-2258&friends(0).id=0&friends(0).name=Colon+Salazar&friends(1).id=1&friends(1).name=French+Mcneil&friends(2).id=2&friends(2).name=Carol+Martin&favoriteFruit=banana

その中で最も短いのがURL Object Notationです。


2

わかりました、それは古い投稿ですが、私はこの問題に直面していて、私の個人的な解決策を見つけました。おそらく他の誰かを助けることができます。

     function objToQueryString(obj){
        var k = Object.keys(obj);
        var s = "";
        for(var i=0;i<k.length;i++) {
            s += k[i] + "=" + encodeURIComponent(obj[k[i]]);
            if (i != k.length -1) s += "&";
        }
        return s;
     };

2

ネストされたオブジェクトが多数ある場合、上記の回答は機能しません。代わりに、ここから関数paramを選択できます-https ://github.com/knowledgecode/jquery-param/blob/master/jquery-param.js それは私にとって非常にうまくいきました!

    var param = function (a) {
    var s = [], rbracket = /\[\]$/,
        isArray = function (obj) {
            return Object.prototype.toString.call(obj) === '[object Array]';
        }, add = function (k, v) {
            v = typeof v === 'function' ? v() : v === null ? '' : v === undefined ? '' : v;
            s[s.length] = encodeURIComponent(k) + '=' + encodeURIComponent(v);
        }, buildParams = function (prefix, obj) {
            var i, len, key;

            if (prefix) {
                if (isArray(obj)) {
                    for (i = 0, len = obj.length; i < len; i++) {
                        if (rbracket.test(prefix)) {
                            add(prefix, obj[i]);
                        } else {
                            buildParams(prefix + '[' + (typeof obj[i] === 'object' ? i : '') + ']', obj[i]);
                        }
                    }
                } else if (obj && String(obj) === '[object Object]') {
                    for (key in obj) {
                        buildParams(prefix + '[' + key + ']', obj[key]);
                    }
                } else {
                    add(prefix, obj);
                }
            } else if (isArray(obj)) {
                for (i = 0, len = obj.length; i < len; i++) {
                    add(obj[i].name, obj[i].value);
                }
            } else {
                for (key in obj) {
                    buildParams(key, obj[key]);
                }
            }
            return s;
        };

    return buildParams('', a).join('&').replace(/%20/g, '+');
};

2

JAVASCRIPTオブジェクトのクエリ文字列エンコーディング用ES6ソリューション

const params = {
  a: 1,
  b: 'query stringify',
  c: null,
  d: undefined,
  f: '',
  g: { foo: 1, bar: 2 },
  h: ['Winterfell', 'Westeros', 'Braavos'],
  i: { first: { second: { third: 3 }}}
}

static toQueryString(params = {}, prefix) {
  const query = Object.keys(params).map((k) => {
    let key = k;
    const value = params[key];

    if (!value && (value === null || value === undefined || isNaN(value))) {
      value = '';
    }

    switch (params.constructor) {
      case Array:
        key = `${prefix}[]`;
        break;
      case Object:
        key = (prefix ? `${prefix}[${key}]` : key);
        break;
    }

    if (typeof value === 'object') {
      return this.toQueryString(value, key); // for nested objects
    }

    return `${key}=${encodeURIComponent(value)}`;
  });

  return query.join('&');
}

toQueryString(params)

"a=1&b=query%20stringify&c=&d=&f=&g[foo]=1&g[bar]=2&h[]=Winterfell&h[]=Westeros&h[]=Braavos&i[first][second][third]=3"

2

これは、そのままの状態で.NETバックエンドで機能するソリューションです。私はこのスレッドの主な答えを取り上げ、.NETのニーズに合わせて更新しました。

function objectToQuerystring(params) {
var result = '';

    function convertJsonToQueryString(data, progress, name) {
        name = name || '';
        progress = progress || '';
        if (typeof data === 'object') {
            Object.keys(data).forEach(function (key) {
                var value = data[key];
                if (name == '') {
                    convertJsonToQueryString(value, progress, key);
                } else {
                    if (isNaN(parseInt(key))) {
                        convertJsonToQueryString(value, progress, name + '.' + key);
                    } else {
                        convertJsonToQueryString(value, progress, name + '[' + key+ ']');
                    }
                }
            })
        } else {
            result = result ? result.concat('&') : result.concat('?');
            result = result.concat(`${name}=${data}`);
        }
    }

    convertJsonToQueryString(params);
    return result;
}

1

そのためのパッケージを作成しました:object-query-string :)

ネストされたオブジェクト、配列、カスタムエンコーディング関数などをサポートします。軽量でjQueryは無料です。

// TypeScript
import { queryString } from 'object-query-string';

// Node.js
const { queryString } = require("object-query-string");

const query = queryString({
    filter: {
        brands: ["Audi"],
        models: ["A4", "A6", "A8"],
        accidentFree: true
    },
    sort: 'mileage'
});

戻り値

filter[brands][]=Audi&filter[models][]=A4&filter[models][]=A6&filter[models][]=A8&filter[accidentFree]=true&sort=milage

0

ちょうど別の方法(再帰オブジェクトなし):

   getQueryString = function(obj)
   {
      result = "";

      for(param in obj)
         result += ( encodeURIComponent(param) + '=' + encodeURIComponent(obj[param]) + '&' );

      if(result) //it's not empty string when at least one key/value pair was added. In such case we need to remove the last '&' char
         result = result.substr(0, result.length - 1); //If length is zero or negative, substr returns an empty string [ref. http://msdn.microsoft.com/en-us/library/0esxc5wy(v=VS.85).aspx]

      return result;
   }

alert( getQueryString({foo: "hi there", bar: 123, quux: 2 }) );

0

回答@ user187291を参照し、パラメーターとして「isArray」を追加して、jsonのネストされた配列を変換します。

data : {
                    staffId : "00000001",
                    Detail : [ {
                        "identityId" : "123456"
                    }, {
                        "identityId" : "654321"
                    } ],

                }

結果を作成するには:

staffId = 00000001&Detail [0] .identityId = 123456&Detail [1] .identityId = 654321

serialize = function(obj, prefix, isArray) {
        var str = [],p = 0;
        for (p in obj) {
            if (obj.hasOwnProperty(p)) {
                var k, v;
                if (isArray)
                    k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
                else
                    k = prefix ? prefix + "." + p + "" : p, v = obj[p];

                if (v !== null && typeof v === "object") {
                    if (Array.isArray(v)) {
                        serialize(v, k, true);
                    } else {
                        serialize(v, k, false);
                    }
                } else {
                    var query = k + "=" + v;
                    str.push(query);
                }
            }
        }
        return str.join("&");
    };

    serialize(data, "prefix", false);

0

簡単なJavaScriptを使用してこれを実現することもできます

const stringData = '?name=Nikhil&surname=Mahirrao&age=30';
    
const newData= {};
stringData.replace('?', '').split('&').map((value) => {
  const temp = value.split('=');
  newData[temp[0]] = temp[1];
});

console.log('stringData: '+stringData);
console.log('newData: ');
console.log(newData);


1
これはいい練習ですが、これは逆です。質問に対する答えではありません。
Christiaan Westerbeek、2018
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.