ইউআরএল কোয়েরি পরামিতিগুলির তালিকায় কোনও অবজেক্টকে কীভাবে সিরিয়ালাইজ করা যায়?


148

একটি জাভাস্ক্রিপ্টের কীগুলি না জেনে Objectআমি কীভাবে এমন কিছু ঘুরিয়ে আনতে পারি ...

var obj = {
   param1: 'something',
   param2: 'somethingelse',
   param3: 'another'
}

obj[param4] = 'yetanother';

... মধ্যে ...

var str = 'param1=something&param2=somethingelse&param3=another&param4=yetanother';

...?


আপনি কি পুনরাবৃত্তি সমাধান খুঁজছেন?
জারেড ফারিশ

1
@Jared আমি recursive সমাধান :) যোগ
Alex

@ আলেক্স - ধন্যবাদ; আমি আরও জটিল সমস্যার উপর আরও অভিজ্ঞ লোকের উত্তরগুলি দেখতে পছন্দ করি। :)
জ্যারেড ফারিশ

2
@ জ্যারেড আপনি জানেন, আমি কখনই নিজেকে অভিজ্ঞ জাভাস্ক্রিপ্ট বিকাশকারী হিসাবে ভাবি না । আরো মত হ্যাক 'তিল এটি কাজ করে লোক :)
Alex

@ অ্যালেক্স - ওহ হ্যাঁ, আমিও। তবে আপনি যা একসাথে রেখেছেন তা কীভাবে আমি এটির কাছে পৌঁছানোর সাথে তুলনা করব? আমি প্রতিনিয়ত অবাক হই।
জারেড ফারিশ

উত্তর:


104
var str = "";
for (var key in obj) {
    if (str != "") {
        str += "&";
    }
    str += key + "=" + encodeURIComponent(obj[key]);
}

উদাহরণ: http://jsfiddle.net/WFPen/


3
পুনরাবৃত্তি সহ একটি ফাংশন ব্যবহার করবেন না কেন?
জারেড ফারিশ

1
ধন্যবাদ @ আরথ! আমি কেবলমাত্র আপনার উপরে @ প্যাট্রিকের উত্তর গ্রহণ করেছি (তারা মূলত একই রকম) কারণ তিনি প্রথম ছিলেন, আমি বিশ্বাস করি। আমি আপনার প্রতিক্রিয়া জন্য খুব কৃতজ্ঞ।
ববসোপ

4
@ ববসোপ: আমার মনে হয় @ আরোথ আমার চেয়ে কিছুটা এগিয়ে ছিল, তাই আমি @ আরথকে অন্য সমস্ত জিনিস সমান বলে দিই।
ব্যবহারকারী 113716

3
আপত্তি [কী] এনকোডিউআরআইসি কম্পোনেন্ট () এ মোড়ানো উচিত নয়? 'সামথিনেলিজ' যদি 'কিছু অন্য কিছু' হত তবে কী হবে?
জেমস এস

1
আমি নিশ্চিত যে এটি গ্রহণযোগ্য উত্তর, বা এই স্ট্যাকওভারফ্লো থ্রেডের প্রায় প্রতিটি উত্তর হওয়া উচিত নয় । নীচের @ জ্যাকের উত্তরটি বাদ দিয়ে সম্ভাব্য ব্যতীত তাদের কারও না হওয়ার প্রাথমিক কারণটি এই { a:[ 1, 2 ], b:{ c:3, d:[ 4, 5 ], e:{ x:[ 6 ], y:7, z:[ 8, 9 ] }, f:true, g:false, h:undefined }, i:[ 10, 11 ], j:true, k:false, l:[ undefined, 0 ], m:"cowboy hat?" };বিষয়টিকে সঠিকভাবে এনকোডিংয়ের জন্য সন্তুষ্ট করবে, এটি দেখে মনে হচ্ছে @ ইউনোকো এমন একটি এনপিএম লাইব্রেরি প্রস্তাব করেছিল যা কাজ করবে, যা কার্যকরী পরম পদ্ধতিটিকে jQuery থেকে আলাদা করে টিকে রাখে।
ওয়েস

128

আপনি যদি jQuery ব্যবহার করেন তবে এটি জিইটি আজ্যাক্স অনুরোধের বিকল্পগুলি প্যারামিটারাইজ করার জন্য এটি ব্যবহার করে:

$.param( obj )

http://api.jquery.com/jQuery.param/


120

একটি মার্জিত একটি: (ধরে নিই যে আপনি একটি আধুনিক ব্রাউজার বা নোড চালাচ্ছেন)

var str = Object.keys(obj).map(function(key) {
  return key + '=' + obj[key];
}).join('&');

এবং ES2017 সমতুল্য: (লুকাশকে ধন্যবাদ)

let str = Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&');

দ্রষ্টব্য: আপনি সম্ভবত encodeURIComponent()কীগুলি / মানগুলি URL এনকোডড না করে ব্যবহার করতে চান ।


50
আমি কেবল পরিবর্তন করব+ encodeURIComponent(obj[key])
জ্যাকব ভ্যালেন্টা

1
@ জ্যাকবভ্যালেন্টা এটি প্রশ্নের অংশ নয়
বেনউইট

5
এখানে এটা ES2015 হয়Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&')
লুকাস

2
বস্তুটির কোনও নেস্টেড বৈশিষ্ট্য থাকলে এটি ভেঙে যায়।
শিম বিন

2
ES2015 এর উত্তরটি এনকোড করতে উত্তরটি এতে পরিবর্তন করুন:=${encodeURIComponent(val)}
BBlackwo

49

এ কেমন? এটি একটি লাইন এবং কোনও নির্ভরতা নেই:

new URLSearchParams(obj).toString();
// OUT: param1=something&param2=somethingelse&param3=another&param4=yetanother

ইউআরএল বিল্ট ইন এর মতো এটি ব্যবহার করুন:

let obj = { param1: 'something', param2: 'somethingelse', param3: 'another' }
obj['param4'] = 'yetanother';
const url = new URL(`your_url.com`);
url.search = new URLSearchParams(obj);
const response = await fetch(url);

[এপ্রিল 4, 2020 সম্পাদনা করুন]: মন্তব্যে বর্ণিত nullমানগুলির একটি স্ট্রিং হিসাবে ব্যাখ্যা করা হবে 'null'। সুতরাং নাল মান সঙ্গে সাবধান।


10
এটি মাইলের সেরা উত্তর
হারাবান

দ্রষ্টব্য: নোডে <10 আপনার প্রয়োজন / প্রয়োজন যেমন আমদানি করতে হবেconst { URLSearchParams } = require("url");
গ্রোভকোডার

1
@ হংসসাতুনা আমি কখনও ইউআরএল প্যারামিটারে বহুমাত্রিক বস্তু স্থাপনের কথা ভাবি নি, সাধারণত
জেএসএনের

1
এই এক এবং নাল মান সঙ্গে সাবধান।
জারাক্সিয়া

25

ES2017 পদ্ধতির

Object.entries(obj).map(([key, val]) => `${key}=${val}`).join('&')

1
ES2017 , প্রযুক্তিগতভাবে।
নিক জালুটস্কি

1
এর জন্য কী এবং মান উভয়ই এনকোডিং দরকার। অন্যান্য উত্তরগুলি এনকোডেরিকোনমিকোম্পোন্টে দেখুন।
hraban


19

এক স্তরের গভীর ...

var serialiseObject = function(obj) {
    var pairs = [];
    for (var prop in obj) {
        if (!obj.hasOwnProperty(prop)) {
            continue;
        }
        pairs.push(prop + '=' + obj[prop]);
    }
    return pairs.join('&');
}

jsFizz

নির্বিচারে গভীর বস্তুগুলির জন্য একটি পুনরাবৃত্ত ফাংশন সম্পর্কে কথা ছিল ...

var serialiseObject = function(obj) {
    var pairs = [];
    for (var prop in obj) {
        if (!obj.hasOwnProperty(prop)) {
            continue;
        }
        if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
            pairs.push(serialiseObject(obj[prop]));
            continue;
        }
        pairs.push(prop + '=' + obj[prop]);
    }
    return pairs.join('&');
}

jsFizz

অবশ্যই এটির অর্থ হল যে সিরিয়ালকরণে নেস্টিং প্রসঙ্গটি হারিয়ে গেছে।

মানগুলি যদি আরম্ভ করার জন্য URL টি এনকোড করা না থাকে এবং আপনি সেগুলি কোনও ইউআরএল-এ ব্যবহার করার ইচ্ছা করেন তবে জাভাস্ক্রিপ্টের পরীক্ষা করে দেখুন encodeURIComponent()


1
অ্যালেক্স: দুঃখিত, আমরা বন্ধ হয়েছি ...; ও)
ব্যবহারকারী 113716

নিরাপদ হচ্ছে জন্য +1 চেয়ে আমি হতে ইচ্ছুক: .hasOwnProperty(prop)
ব্যবহারকারী 113716

এটি দুর্দান্ত - এখনকার জন্য মাত্র 1 স্তর প্রয়োজন, তবে পুনরাবৃত্ত ফাংশনটি করা ভাল। এটি যুক্ত করার জন্য ধন্যবাদ!
ববসোপ

1
@ রিপার 234 আপনি যদি সেই পদ্ধতিটি আপনার প্রয়োজনীয়তার সাথে মানানসই হন তবে আপনি এই পদ্ধতিটি ব্যবহার করতে পারবেন না।
অ্যালেক্স


5

কেবল রেকর্ডের জন্য এবং আপনার কাছে ES6 সমর্থনকারী একটি ব্রাউজার রয়েছে, এর সমাধান এখানে দেওয়া হল reduce:

Object.keys(obj).reduce((prev, key, i) => (
  `${prev}${i!==0?'&':''}${key}=${obj[key]}`
), '');

এবং এখানে কর্মে একটি স্নিপেট!

// Just for test purposes
let obj = {param1: 12, param2: "test"};

// Actual solution
let result = Object.keys(obj).reduce((prev, key, i) => (
  `${prev}${i!==0?'&':''}${key}=${obj[key]}`
), '');

// Run the snippet to show what happens!
console.log(result);


4

যেহেতু আমি পুনরাবৃত্তির ক্রিয়াকলাপটি সম্পর্কে এত বড় কাজ করেছি, তাই এখানে আমার নিজস্ব সংস্করণ।

function objectParametize(obj, delimeter, q) {
    var str = new Array();
    if (!delimeter) delimeter = '&';
    for (var key in obj) {
        switch (typeof obj[key]) {
            case 'string':
            case 'number':
                str[str.length] = key + '=' + obj[key];
            break;
            case 'object':
                str[str.length] = objectParametize(obj[key], delimeter);
        }
    }
    return (q === true ? '?' : '') + str.join(delimeter);
}

http://jsfiddle.net/userdude/Kk3Lz/2/


3
(ক) কিছু এলোমেলো চিন্তা (ক) []এর চেয়ে বেশি পছন্দ করা হয়েছে new Array()(খ) আপনি delimiter = delimiter || '&';আর্গুমেন্ট ডিফল্টের জন্য ব্যবহার করতে পারেন (এবং আপনি এটি ভুল বানান করেছেন) (গ) for ( in )প্রোটোটাইপ শৃঙ্খলে থাকা সমস্ত জিনিস সহ এর পরিসংখ্যান পুনরাবৃত্তি করবে (এর obj.hasOwnProperty()বিরুদ্ধে রক্ষা করবে) (ঘ) typeofকরতে থাকা , যেমন কি জিনিস সম্পর্কে কিছু সংখ্যার যাবে Objectযদি নির্মাণ Number()কন্সট্রাকটর (ঙ) Arrayএকটি আছে push()তুলনায় যোগ সদস্যদের (চ) জন্য পদ্ধতি trueঅপ্রয়োজনীয়। আমি একটি নিটপিকি জারজ কিন্তু আপনি প্রতিক্রিয়া চেয়েছিলেন! :)
অ্যালেক্স

1
... এবং যদি আপনি ক্রোকফোর্ডের সমস্ত বিষয়ে সঠিক হন তবে আপনার স্যুইচ কেসগুলি যেন না ঘটে। যদিও আমি তার সাথে একমত নই। : ডি
অ্যালেক্স

@ অ্যালেক্স - আমি এটির প্রশংসা করি ক) আমার প্রথমটি ছিল, দেরি হয়ে গেছে এবং আমি ঘুমিয়ে ছিলাম; খ) নিশ্চিত হওয়া যায় না উন্নতি কী, দ্বিতীয়টি ছিল একটি ঘুম-বঞ্চিত মুহূর্ত; গ) আমি ভাবছিলাম আপনি কেন ব্যবহার করেছেন hasOwnProperty(); d) এটি অবশ্যই সত্য এবং একটি ভাল বিষয়; ঙ) আমি কখনও ব্যবহার push()বা pop()পদ্ধতি ব্যবহার করতে পারি নি ; চ) breakবা না break, এটাই প্রশ্ন। আপনার বিস্তারিত ইনপুট জন্য আপনাকে ধন্যবাদ। :)
জ্যারেড ফারিশ

4

আপনার ক্যোয়ারিতে অ্যারে থাকলে একটি দরকারী কোড:

var queryString = Object.keys(query).map(key => {
    if (query[key].constructor === Array) {
        var theArrSerialized = ''
        for (let singleArrIndex of query[key]) {
            theArrSerialized = theArrSerialized + key + '[]=' + singleArrIndex + '&'
        }
        return theArrSerialized
    }
    else {
        return key + '=' + query[key] + '&'
    }
}
).join('');
console.log('?' + queryString)

4

আপনি যদি নোডজেএস 13.1 বা ততোধিক ব্যবহার করছেন তবে আপনি কোয়েরি স্ট্রিংকে বিশ্লেষণ করতে দেশী ক্যোরিস্ট্রিং মডিউলটি ব্যবহার করতে পারেন।

const qs = require('querystring');
let str = qs.stringify(obj)

3
var str = '';

for( var name in obj ) {
    str += (name + '=' + obj[name] + '&');
}

str = str.slice(0,-1);

এই শট দিন।

উদাহরণ: http://jsfiddle.net/T2UWT/


1
@ জ্যারেড: লুপের চেয়ে কম দক্ষ।
ব্যবহারকারী 113716

@ জ্যারেড: Qs এবং As এর নীচে ব্যবহারকারীর নাম প্রয়োজন নেই। বিজ্ঞপ্তিগুলি স্বয়ংক্রিয়।
ব্যবহারকারী 113716

"কম পারফর্মেন্ট"? আমি যদি একটি স্বেচ্ছাচারিত বস্তুতে পাস করি এবং একটি জিইটি স্ট্রিং ফিরিয়ে আনতে চাই তবে এর সাথে পারফরম্যান্সের কী সম্পর্ক আছে?
জারেড ফারিশ

@ জ্যারেড: আমি দুঃখিত, তবে সম্ভবত আমি আপনার অর্থ বুঝতে পারছি না। যদি আপনি লুপের পরিবর্তে পুনরাবৃত্ত ফাংশন কলগুলি ব্যবহারের পরামর্শ দিচ্ছেন তবে আমি নিশ্চিত যে পুনরাবৃত্ত ফাংশনগুলি লুপের চেয়ে আরও ধীরে ধীরে সঞ্চালন করবে। আমি কি আপনার বক্তব্য ভুল বুঝেছি?
ব্যবহারকারী 113716

1
ভাল, আমি জানি না আমি অনুমান করি। যদি কোনও ফাংশন থাকে যা আপনি এটিকে কোনও অবজেক্ট প্রেরণ করেন এবং সেই বস্তুর একটি স্ট্রিং-কনক্যাটনেটেড জিইটি-কোয়ালিটিড সংস্করণ আউটপুট করেন তবে আমি একক লুপ সর্বদা ইনপুটটির সাথে কাজ করবে তা কল্পনাও করি না। অবশ্যই, একটি একক স্তরের লুপটি সর্বদা একটি বহু-স্তরের পুনরাবৃত্তি "আউটফর্ম" করবে, তবে একটি একক স্তরের লুপ এমনকি কোনও বহু-স্তরের অবজেক্ট, আইএমও পরিচালনা করবে না।
জারেড ফারিশ

3

আপনি jQuery এর paramপদ্ধতি ব্যবহার করতে পারেন :

var obj = {
  param1: 'something',
  param2: 'somethingelse',
  param3: 'another'
}
obj['param4'] = 'yetanother';
var str = jQuery.param(obj);
alert(str);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


3
new URLSearchParams({hello: 'world', foo: 'bar' }).toString()

কাজটি মনে হচ্ছে দরকার নেই encodeURIComponent। আউটপুটhello=world&foo=bar


1
এটি আমি পোস্ট করা একটি সদৃশ উত্তর।
jfunk

2

আপনার যদি এমন একটি পুনরাবৃত্ত ফাংশন দরকার যা প্রদত্ত বস্তুর উপর ভিত্তি করে যথাযথ URL প্যারামিটার তৈরি করে, তবে আমার কফি-স্ক্রিপ্টটি চেষ্টা করুন।

@toParams = (params) ->
    pairs = []
    do proc = (object=params, prefix=null) ->
      for own key, value of object
        if value instanceof Array
          for el, i in value
            proc(el, if prefix? then "#{prefix}[#{key}][]" else "#{key}[]")
        else if value instanceof Object
          if prefix?
            prefix += "[#{key}]"
          else
            prefix = key
          proc(value, prefix)
        else
          pairs.push(if prefix? then "#{prefix}[#{key}]=#{value}" else "#{key}=#{value}")
    pairs.join('&')

অথবা জাভাস্ক্রিপ্ট সংকলিত ...

toParams = function(params) {
  var pairs, proc;
  pairs = [];
  (proc = function(object, prefix) {
    var el, i, key, value, _results;
    if (object == null) object = params;
    if (prefix == null) prefix = null;
    _results = [];
    for (key in object) {
      if (!__hasProp.call(object, key)) continue;
      value = object[key];
      if (value instanceof Array) {
        _results.push((function() {
          var _len, _results2;
          _results2 = [];
          for (i = 0, _len = value.length; i < _len; i++) {
            el = value[i];
            _results2.push(proc(el, prefix != null ? "" + prefix + "[" + key + "][]" : "" + key + "[]"));
          }
          return _results2;
        })());
      } else if (value instanceof Object) {
        if (prefix != null) {
          prefix += "[" + key + "]";
        } else {
          prefix = key;
        }
        _results.push(proc(value, prefix));
      } else {
        _results.push(pairs.push(prefix != null ? "" + prefix + "[" + key + "]=" + value : "" + key + "=" + value));
      }
    }
    return _results;
  })();
  return pairs.join('&');
};

এটি এর মতো স্ট্রিং তৈরি করবে:

toParams({a: 'one', b: 'two', c: {x: 'eight', y: ['g','h','j'], z: {asdf: 'fdsa'}}})

"a=one&b=two&c[x]=eight&c[y][0]=g&c[y][1]=h&c[y][2]=j&c[y][z][asdf]=fdsa"

আমি মনে করি এটি আমি দেয়ালে ঝুলিয়ে দেব
পাই 6k 13

2

একটি কার্যকরী পদ্ধতির।

var kvToParam = R.mapObjIndexed((val, key) => {
  return '&' + key + '=' + encodeURIComponent(val);
});

var objToParams = R.compose(
  R.replace(/^&/, '?'),
  R.join(''),
  R.values,
  kvToParam
);

var o = {
  username: 'sloughfeg9',
  password: 'traveller'
};

console.log(objToParams(o));
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js"></script>



0

এই পদ্ধতিটি বস্তুর শ্রেণিবিন্যাসে নামতে এবং রেল স্টাইলের প্যারাম তৈরি করতে পুনরাবৃত্তি ব্যবহার করে যা রেলগুলি এম্বেডড হ্যাশ হিসাবে ব্যাখ্যা করে। অবজেক্টোপ্যারামস শেষে একটি অতিরিক্ত এম্পারস্যান্ড সহ একটি ক্যোয়ারী স্ট্রিং উত্পন্ন করে এবংজেজটোকুয়্যাকারি চূড়ান্ত অ্যাম্পারসিন্ড সরিয়ে দেয়।

 function objToQuery(obj){
  let str = objToParams(obj,'');
  return str.slice(0, str.length);
}
function   objToParams(obj, subobj){
  let str = "";

   for (let key in obj) {
     if(typeof(obj[key]) === 'object') {
       if(subobj){
         str += objToParams(obj[key], `${subobj}[${key}]`);
       } else {
         str += objToParams(obj[key], `[${key}]`);
       }

     } else {
       if(subobj){
         str += `${key}${subobj}=${obj[key]}&`;
       }else{
         str += `${key}=${obj[key]}&`;
       }
     }
   }
   return str;
 }


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.