Làm cách nào để tuần tự hóa một Đối tượng vào danh sách các tham số truy vấn URL?

Không biết các khóa của JavaScript Object, làm cách nào tôi có thể biến một cái gì đó như ...

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

obj[param4] = 'yetanother';

... vào ...

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

...?

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

Ví dụ: http://jsfiddle.net/WFPen/

Nếu bạn sử dụng jQuery, đây là những gì nó sử dụng để tham số hóa các tùy chọn của yêu cầu GET ajax:

$.param( obj )

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

Một trang nhã: (giả sử bạn đang chạy một trình duyệt hoặc nút hiện đại)

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

Và tương đương ES2017: (nhờ Lukas)

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

Lưu ý: Bạn có thể muốn sử dụng encodeURIComponent()nếu các khóa / giá trị không được mã hóa URL.

Còn cái này thì sao? Đây là một dòng và không phụ thuộc:

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

Sử dụng nó với URL dựng sẵn như vậy:

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

[Chỉnh sửa ngày 4 tháng 4 năm 2020]: như được đề cập trong các nullgiá trị nhận xét sẽ được hiểu là một chuỗi 'null'. Vì vậy, hãy cẩn thận với các giá trị null.

Cách tiếp cận ES2017

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

ES6:

function params(data) {
  return Object.keys(data).map(key => `${key}=${encodeURIComponent(data[key])}`).join('&');
}

console.log(params({foo: 'bar'}));
console.log(params({foo: 'bar', baz: 'qux$'}));

Đối với một cấp độ sâu ...

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

jsFiddle .

Đã có cuộc nói chuyện về một hàm đệ quy cho các đối tượng sâu tùy ý ...

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

jsFiddle .

Tất nhiên điều này có nghĩa là bối cảnh lồng nhau bị mất trong tuần tự hóa.

Nếu các giá trị không được mã hóa URL để bắt đầu và bạn dự định sử dụng chúng trong một URL, hãy xem JavaScript encodeURIComponent().

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

Chỉ dành cho bản ghi và trong trường hợp bạn có trình duyệt hỗ trợ ES6, đây là một giải pháp với reduce:

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

Và đây là một đoạn trong hành động!

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

Vì tôi đã thực hiện một thỏa thuận lớn như vậy về một hàm đệ quy, đây là phiên bản của riêng tôi.

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/

Một mã hữu ích khi bạn có mảng trong truy vấn của mình:

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)

Nếu bạn đang sử dụng NodeJS 13.1 trở lên, bạn có thể sử dụng mô đun chuỗi truy vấn gốc để phân tích các chuỗi truy vấn.

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

var str = '';

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

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

Cho nó một shot.

Ví dụ: http://jsfiddle.net/T2UWT/

Bạn có thể sử dụng paramphương thức của jQuery :

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>

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

dường như làm công việc Không cần encodeURIComponent. Đầu rahello=world&foo=bar

Nếu bạn cần một hàm đệ quy sẽ tạo ra các tham số URL thích hợp dựa trên đối tượng được cung cấp, hãy thử dùng Coffee-Script của tôi.

@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('&')

hoặc JavaScript được biên dịch ...

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

Điều này sẽ xây dựng các chuỗi như vậy:

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"

Một cách tiếp cận chức năng.

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>

Object.toparams = function ObjecttoParams(obj) 
{
  var p = [];
  for (var key in obj) 
  {
    p.push(key + '=' + encodeURIComponent(obj[key]));
  }
  return p.join('&');
};

phương thức này sử dụng đệ quy để đi xuống hệ thống phân cấp đối tượng và tạo ra các tham số kiểu đường ray mà đường ray diễn giải dưới dạng băm nhúng. objToParams tạo ra một chuỗi truy vấn có thêm dấu và ở cuối và objToQuery sẽ loại bỏ ký hiệu cuối cùng.

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

Bạn có thể sử dụng chuỗi truy vấn lib npm

const queryString = require('query-string');

querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
// Returns 'foo=bar&baz=qux&baz=quux&corge='