एक जावास्क्रिप्ट ऑब्जेक्ट की क्वेरी-स्ट्रिंग एन्कोडिंग

Question

क्या आप जावास्क्रिप्ट ऑब्जेक्ट को एनकोड करने का एक तेज़ और सरल तरीका जानते हैं stringकि मैं एक GETअनुरोध से गुजर सकता हूं ?

नहीं jQuery, कोई अन्य चौखटे नहीं - बस सादा जावास्क्रिप्ट :)

Comments

यदि आपके समाधान के लिए उपयुक्त कोई है तो JQuery एक समाधान क्यों नहीं हो सकता है?

— eaglei22

@ eaglei22 क्योंकि उस समय मैं एक आईपीटीवी सेट टॉप बॉक्स डिवाइस के लिए एक प्रोजेक्ट पर काम कर रहा था और किसी बाहरी लाइब्रेरी की अनुमति नहीं थी। ;-)

— नेपोलक्स

जवाब देने के लिए धन्यवाद। मैं इस विनिर्देश को समय-समय पर देखता हूं और हमेशा एक परिदृश्य सोचता हूं कि क्यों। खैर, अब मुझे एक मिल गया, धन्यवाद! :)

— ईगलिई २२

@ eaglei22 क्योंकि कभी-कभी आप आईडी द्वारा एक तत्व प्राप्त करने के लिए एक बड़े पुस्तकालय को लोड नहीं करना चाहते हैं।

— आरोन हारुन

अधिकांश ब्राउज़र URLSearchParamsअब समर्थन करते हैं ...

— mb21

Answer 1

इस तरह?

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

Comments

क्या यह {foo: [1,2,3], बार: "100%"} नहीं दिया जाएगा?

— क्वेंटिन

@Ofri: इसे प्राप्त करने के लिए एक सर्वर के लिए POST अनुरोधों के लिए, JSON एक अच्छा विकल्प है। GET अनुरोधों के लिए, यदि आप सर्वर पर कुछ सरल मापदंडों के अलावा कुछ भी भेज रहे हैं, तो संभावना है कि आपका डिज़ाइन गलत है।

— टिम डाउन

@Marcel इसलिए कि फ़ंक्शन hasOwnProperty के लिए जाँच नहीं करता है। मैंने आपकी

— फिडेल को

@TimDown GET अनुरोधों में सरल पैरामीटर भेजने वाली आपकी टिप्पणी के बारे में मैं इससे सहमत नहीं हूँ। सरणियों में समूहीकरण कार्य आसान हो सकता है क्योंकि सर्वर साइड में PHP जाने के लिए तैयार-स्थिर साहचर्य सरणी पाता है। मैं यह नहीं देख सकता कि यह डिजाइन के रूप में गलत क्यों है।

— सावास वेदोवा

क्या 'if (obj.hasOwnProperty (प्रोप))' आवश्यक है? केवल वस्तु के गुणों पर स्टेटमेंट लूप के लिए इसलिए कॉलिंग hasOwnProperty हमेशा सही का मूल्यांकन करती है

— Arnon

Answer 2

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

Comments

नेपोलियन (ओपी) को उद्धृत करते हुए: "बस सादा जावास्क्रिप्ट" । : पी

— स्किरपेटर

jQuery.param () में भयावह व्यवहार है। Var a = [] निष्पादित करने का प्रयास करें; [२५६४] = १२; कंसोल.लॉग (jQuery.param ({संपत्ति सूची: एक})); देखने के लिए मेरा क्या मतलब है।

— एकॉन्ड

@akond jQuery के दस्तावेज़ विशेष रूप से कहते हैं कि आप एक नंगे सरणी में पास नहीं हो सकते।

— एरियल

@ एरियल वह एक नंगे सरणी में नहीं गुजर रहा है। वह एक सरणी में सूचकांक 2564 पर केवल एक मान के साथ गुजर रहा var a = []; a[5] = 'foo'; jQuery.param({ parameters: a }); है "parameters[]=&parameters[]=&parameters[]=&parameters[]=&parameters[]=&parameters[]=foo"। प्रदर्शित करने के लिए: परिणाम में । जो, जबकि सही है, वह नहीं हो सकता है जो आप उम्मीद करते हैं।

— क्रिस हॉल

प्रश्न विशेष रूप से वेनिला जेएस

— बग हंटर 219

Answer 3

बस सभी वर्तमान ब्राउज़रों मेंURLSearchParams इस काम का उपयोग करें

new URLSearchParams(object).toString()

Comments

नहीं, क्योंकि यह पुनरावर्ती वस्तुओं को नहीं करता है

— एडी मेन्ज जूनियर

नेस्टेड ऑब्जेक्ट पर काम नहीं करता है। let j = { m: 5, n: { k: 1 } }; new URLSearchParams(j).toString(); // result "m=5&n=%5Bobject+Object%5D"

— at

@EddieMongeJr क्वेरी स्ट्रिंग्स डिज़ाइन द्वारा की-वैल्यू जोड़े हैं, आपको नेस्टेड ऑब्जेक्ट्स को क्रमांकित करना भी नहीं चाहिए। यह उत्तर जाने का आधुनिक तरीका है। अपवोट की जरूरत है।

— रोमैन डूरंड

हाँ, वे महत्वपूर्ण मूल्य जोड़े हैं, लेकिन ऐसा कुछ भी नहीं है जो कहता है कि मूल्य एक स्ट्रिंग एन्कोडेड ऑब्जेक्ट नहीं हो सकता है। इसके अलावा, मूल प्रश्न "जावास्क्रिप्ट ऑब्जेक्ट इन ए स्ट्रिंग" के लिए पूछते हैं, जिसमें नेस्टेड गुण हो सकते हैं

— एडी मेन्ज जूनियर

@EddieMongeJr यहां तक ​​कि स्वीकृत उत्तर (और कुछ समय के बाद अन्य) नेस्टेड ऑब्जेक्ट का समर्थन नहीं करता है। आप कर सकते हैं stringifyनेस्टेड वस्तुओं आप कर सकते हैं इससे पहले कि करने के लिएURLSearchParams

— Mosh Feu

Answer 4

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

Comments

रिडक्ट फ़ंक्शन के लिए एक समर्पित लाइन हालांकि पठनीयता में काफी सुधार करेगी।

— औरेलिन रिबॉन

.Reduce () के बजाय .map () का उपयोग करना और भी सरल होगा: Object.keys(obj).map(k => k + '=' + encodeURIComponent(obj[k])).join('&')

— Jannes

बस ध्यान दें कि Object.keysकेवल IE> = 9 में उपलब्ध है

— जॉनसन

आगे सुधरने के बजाय ES6 टेम्प्लेट का उपयोग करके @Jeses कोड में सुधार किया गया -Object.keys(obj).map(k => `${k}=${encodeURIComponent(obj[k])}`).join('&')

— csilk

मामले में आपकी चाबी को एन्कोडयूरिकम्पोनेंटObject.entries(obj).map(e => e.map(ee => encodeURIComponent(ee)).join('=')).join('&');

— Blaise

Answer 5

यहाँ ES6 में एक लाइनर है:

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

Comments

की / w की जगह लें और आप सुनहरे हैं

— जेमी कुडला

चेतावनी! यह केवल उथली वस्तुओं पर काम करता है। यदि आपके पास एक शीर्ष-स्तरीय संपत्ति है जो एक और वस्तु है, तो यह एक लाइनर "कुंजी =% 5busject% 20Object% 5D" का उत्पादन करेगा। बस एक सिर के रूप में।

— एंड्रयू एलब्राइट

इसके अलावा, यह सरणियों को नहीं थूकता है। मुझे मिल गया export?actions[]=finance,create,editजब यह होना चाहिए था के export?actions[]=finance&actions[]=create&actions[]=editरूप में भयानक मानक है।

— Darkbluesun

Arrays बहुत अधिक हमेशा "आप अपने दम पर" होते हैं क्योंकि URL तर्क केवल स्ट्रिंग हैं जहाँ तक कल्पना का संबंध है, इसलिए आप कुछ भी बनाने के लिए हुक पर हैं जो कि एक भी स्ट्रिंग नहीं है सर्वर द्वारा सही ढंग से पढ़ा जाता है आप बुला रहे हैं। actions[]PHP संकेतन है; Django के actionबजाय कई का उपयोग करता है (कोई []प्रत्यय); कुछ अन्य ORM / CMS को अल्पविराम से अलग की गई सूचियों आदि की आवश्यकता होती है, इसलिए "यदि यह सरल तार नहीं है, तो पहले सुनिश्चित करें कि आपको पता है कि आपका सर्वर भी क्या चाहता है"।

— माइक 'पोमैक्स' कमेरमन्स

बहुत सुंदर समाधान!

— आह ट्रान

Answer 6

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

Comments

यह IMO को कम नहीं किया जाना चाहिए, यदि यह सर्वर पर JS है तो यह सही उत्तर होना चाहिए।

— माइकल बेनिन

ऐसा लगता है कि यह नेस्टेड वस्तुओं का समर्थन नहीं करता है।

— यारिन गोल्ड

Answer 7

मैं 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();

Comments

दिलचस्प सुझाव है, लेकिन ध्यान रखें कि इस सुविधा के लिए ब्राउज़र का समर्थन अभी भी बहुत कम है।

— mrec

यदि आप IE (जो अब बहुत सामान्य है) और कुछ विशिष्ट मोबाइल संस्करणों का समर्थन नहीं करने जा रहे हैं, तो यह सबसे अच्छा जवाब है, क्योंकि यह सादे जावास्क्रिप्ट है।

— मार्कोस सैंड्रिनी

Answer 8

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 को खुश करता है, और यह वस्तु या अन्य सामान के गलती से सीरियल के तरीकों को रोक देता है यदि ऑब्जेक्ट कुछ भी हो लेकिन एक सरल शब्दकोश है। इस पृष्ठ के बयानों के लिए पैराग्राफ देखें: http://javascript.crockford.com/code.html

Answer 9

खैर, हर कोई अपना वन-लाइनर यहां डालता है इसलिए यहां मेरा जाता है:

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

Comments

IE में Object.entries समर्थित नहीं है।

— MBouwman

@MBouwman बेशक, IE अच्छाई और बुराई से परे टूट गया है, यही कारण है कि आपको babel / core-js

— chpio

@chpio बैबेल / कोर-जेएस ऑब्जेक्ट का समर्थन नहीं करता है। यदि मैं सही हूं।

— एमबीउमैन

core के पास Object.entries के लिए समर्थन है: github.com/zloirock/core-js/blob/master/… और यहां तक ​​कि पुराने corejs2 babel रनटाइम ट्रांसफॉर्मेशन इसे github.com/babel/babel/blob/…

— chpio

Answer 10

क्या आपको मनमानी वस्तुओं को भेजने की आवश्यकता है? यदि हां, तो GET एक बुरा विचार है क्योंकि URL की लंबाई की सीमाएं हैं जो उपयोगकर्ता एजेंट और वेब सर्वर स्वीकार करेंगे। मेरा सुझाव भेजने और फिर क्वेरी स्ट्रिंग बनाने के लिए नाम-मान जोड़े की एक सरणी का निर्माण करना होगा:

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() );

Answer 11

रेल / PHP स्टाइल क्वेरी बिल्डर

यह विधि एक जावास्क्रिप्ट ऑब्जेक्ट को एक में परिवर्तित करती है 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

Comments

अच्छा उदाहरण है। मैंने आपके उत्तर में एक टाइपो तय किया। वैसे, दिलचस्प होगा यदि आप अपने मूल्यों functionको बाहर करने के लिए संपादित करते falsyहैं (अशक्त, अपरिभाषित, NaN, '') ...

— डेवलपर

Answer 12

JSON का उपयोग करें।

कैसे लागू करने के बारे में विचारों के लिए इस प्रश्न पर एक नज़र डालें ।

Comments

मुझे नहीं पता कि वह सर्वर में क्या लिख ​​रहा है, लेकिन अधिकांश आधुनिक भाषाओं में JSON पढ़ने वाले अच्छे पैकेज हैं। इसके अलावा, भले ही वह इसे लागू करने को समाप्त कर दे, लेकिन JSON-रीडिंग सर्वर कोड को लागू करने से बेहतर है कि आप अपनी एक नई एन्कोडिंग योजना का आविष्कार करें। इस तरह से DIY एनकोडिंग छोटी गाड़ी है (क्योंकि आप आमतौर पर सभी संभावित मामलों के बारे में नहीं सोचते हैं, जैसे कि मूल्य अपने आप में एक सरणी है ')।

— अरी रविवि

क्या आप मूल रूप से तेह वस्तु को JSON में बदलने का सुझाव दे रहे हैं और फिर पूरे JSON स्ट्रिंग को एक एकल GET क्वेरी पैरामीटर के रूप में सर्वर को पास करते हैं?

— मार्को डेमायो

Answer 13

यहाँ स्वीकृत उत्तर का कॉफ़ीस्क्रिप्ट संस्करण है। इससे किसी का समय बच सकता है।

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("&")

Comments

धन्यवाद अल्फांसो! सचमुच मेरा समय बच गया!

— लुकास

Answer 14

यहाँ 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"

Comments

नेस्टेड सरणियों से निपटने के दौरान इस संस्करण ने मेरे लिए काम किया। रूबी / पीएचपी-शैली सरणी कुंजियों का उपयोग करने के लिए एक मामूली ट्विस्ट किया, लेकिन अन्यथा महान काम करता है।

— निकब २।

Answer 15

यह एक शून्य / अपरिभाषित मूल्यों को छोड़ देता है

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

Answer 16

ES7 में आप इसे एक पंक्ति में लिख सकते हैं:

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

Answer 17

वस्तु को क्वेरी स्ट्रिंग में परिवर्तित करने के लिए सिंगल लाइन यदि किसी को फिर से इसकी आवश्यकता हो

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

Answer 18

मेरे पास एक सरल समाधान है जो किसी भी तीसरे पक्ष के पुस्तकालय का उपयोग नहीं करता है और पहले से ही किसी भी ब्राउज़र में उपयोग करने के लिए उपयुक्त है जिसमें "Object.keys" है (सभी आधुनिक ब्राउज़र + एज + उर्फ):

ईएस 5 में

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

ईएस 3 में

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

Answer 19

यदि आप किसी नेस्टेड ऑब्जेक्ट को पुनरावर्ती रूप से कनवर्ट करना चाहते हैं और ऑब्जेक्ट में सरणियाँ हो सकती हैं या नहीं हो सकती हैं (और सरणियों में ऑब्जेक्ट या सरणियाँ, आदि हो सकती हैं), तो समाधान थोड़ा और अधिक जटिल हो जाता है। यह मेरा प्रयास है।

मैंने यह चुनने के लिए कुछ विकल्प भी जोड़े हैं कि क्या आप प्रत्येक ऑब्जेक्ट सदस्य के लिए रिकॉर्ड करना चाहते हैं कि यह मुख्य ऑब्जेक्ट में किस गहराई पर बैठता है, और यह चुनने के लिए कि क्या आप परिवर्तित एरे से आने वाले सदस्यों के लिए एक लेबल जोड़ना चाहते हैं।

आदर्श रूप से आपको परीक्षण करना चाहिए कि क्या चीज़ पैरामीटर वास्तव में एक वस्तु या सरणी प्राप्त करता है।

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;

}

Comments

पुनरावर्ती दृष्टिकोण के लिए धन्यवाद

— शर्लक

Answer 20

स्वीकृत समाधान के लिए जोड़, यह वस्तुओं की वस्तुओं और सरणी के साथ काम करता है:

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 जोड़ दिया है।

Answer 21

थोड़ा सा बेहतर दिखना

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("&");
}

Answer 22

मैंने JSON स्ट्रिंगर्स की तुलना की और परिणाम इस प्रकार हैं:

JSON:    {"_id":"5973782bdb9a930533b05cb2","isActive":true,"balance":"$1,446.35","age":32,"name":"Logan Keller","email":"[e-mail]","phone":"[phone]","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:'[e-mail]',favoriteFruit:banana,friends:!((id:0,name:'Colon Salazar'),(id:1,name:'French Mcneil'),(id:2,name:'Carol Martin')),isActive:!t,name:'Logan Keller',phone:'[phone]')
O-Rison: _id:'5973782bdb9a930533b05cb2',age:32,balance:'$1,446.35',email:'[e-mail]',favoriteFruit:banana,friends:!((id:0,name:'Colon Salazar'),(id:1,name:'French Mcneil'),(id:2,name:'Carol Martin')),isActive:!t,name:'Logan Keller',phone:'[phone]'
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=[e-mail]&phone=[phone]&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=[e-mail]&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 ऑब्जेक्ट नोटेशन है ।

Answer 23

ठीक है, यह एक पुरानी पोस्ट है लेकिन मैं इस समस्या का सामना कर रहा हूं और मैंने अपना व्यक्तिगत समाधान ढूंढ लिया है .. शायद किसी और की मदद कर सकता हूं।

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

Answer 24

उपरोक्त उत्तर काम नहीं करते हैं यदि आपके पास बहुत से नेस्टेड ऑब्जेक्ट हैं। इसके बजाय आप यहाँ से फंक्शन परम ले सकते हैं - 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, '+');
};

Answer 25

ES6 समाधान एक JAVASCRIPT OBJECT की त्वरित STRING प्रविष्टि के लिए

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 (पैरामीटर)

"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"

Answer 26

यह एक समाधान है जो .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;
}

Answer 27

मैंने इसके लिए एक पैकेज लिखा है: ऑब्जेक्ट-क्वेरी-स्ट्रिंग :)

नेस्टेड ऑब्जेक्ट, सरणियों, कस्टम एन्कोडिंग फ़ंक्शन आदि का समर्थन करता है लाइटवेट और 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

Answer 28

बस एक और तरीका (कोई पुनरावर्ती वस्तु):

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

Answer 29

जवाब @ user187291 से देखें, "isArray" को पैरामीटर के रूप में जोड़कर json नेस्टेड सरणी में परिवर्तित किया जा सकता है।

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

                }

परिणाम बनाने के लिए:

staffId = 00000001 और विस्तार [0] .identityId = 123456 और विस्तार [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);

Answer 30

आप साधारण जावास्क्रिप्ट का उपयोग करके भी इसे प्राप्त कर सकते हैं ।

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

Comments

यह एक अच्छा व्यायाम है, लेकिन यह दूसरा तरीका है। सवाल का जवाब नहीं।

— क्रिस्टियान Westerbeek