在 URLSearchParams 中使用 json 对象

Question

是否有可能以某种方式将 json 对象附加到 URLSearchParams 对象上？

所以而不是：

urlSearchParams.append('search', 'person');

它是：

urlSearchParams.append({search: "person"});

我的回答由 Darshak Gajjar 的回答提供

可以通过这种方式使用json对象：

let test_this = [{"search": "person"}, { search: "another person"}];
var json = JSON.stringify(test_this);
urlSearchParams.append("myobj", json);

return this.http.post(this.post_url, urlSearchParams, options) //options being your own RequestOptions

Answer 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

这样的事情可能会起作用urlSearchParams = Object.assign(urlSearchParams, {search: "person"});

编辑：使用 vanilla javascript 的替代解决方案。另外，我以为 URLSearchParams 只是一个普通的 js 对象，但实际上你必须使用get、set 和append 来访问属性。

var params = new URLSearchParams("a=apple&b=balloon");
var parametersToAdd = {c: "car", d: "duck"};
for(key in parametersToAdd)
  params.append(key, parametersToAdd[key]);

console.log(params.get('c'));
console.log(params.get('d'));
  

编辑之二： .append() 支持重复使用相同的键/参数名称，而 .set() 会覆盖以前的值。

Answer 2

可能使用下面的代码，您可以在 URL 搜索参数中传递整个 json 对象

var json = JSON.stringify(myObj);

this.http.get('url'+'?myobj='+encodeURIComponent(json))

Answer 3

没有用于此的 API。您只需要枚举属性并手动附加它们，例如使用以下函数：

function appendParams(params: URLSearchParams, obj: any) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      params.append(key, obj[key])
    }
  }
}

appendParams(urlSearchParams, { search: 'person' });

Answer 4

想要分享我对Angular2 的回答，可选择发送Array 这就是我使用get 函数的方式：

this.get('/api/database', {
   'age': [1,2,3,4]
})

服务是这样的：

get(url, _params = {}) {
    let params = this._processParams(_params);

    return this.http.get(url, params).toPromise();
}

_processParams(obj: any) {
        /* Convert this
            { age: [1,2,3] }
           To:
              param.append('age', 1);
              param.append('age', 2);
              param.append('age', 3);
        */        
        let params = new URLSearchParams();

        for (let key in obj) {
            for (let index in obj[key] ) {                
                params.append(key, obj[key][index]);
            }
        }

        return {
            search: params
        };
    }

Answer 5

const url = new URL('/', location.origin);
console.log(url.href); // https://stackoverflow.com/
Object.entries({this:4,that:1}).forEach((item)=>{ 
// note .set replaces while .append will duplicate params
    url.searchParams.append(...item);
});
console.log(url.href); // https://stackoverflow.com/?this=4&that=1

Answer 6

这是我的方法。我们有一个简单的要求，对象只是一个键值对，其值可能是字符串或数组。我们还没有找到嵌套对象的用例。

假设我们想将此对象转换为查询字符串，反之亦然：

const input = {
  ini: 'ini',
  itu: 'itu',
  ayo: ['desc', 'asc'],
}

然后我们有两个函数来解析和字符串化：

function stringify(input) {
  const params = new URLSearchParams();

  for (const key in input) {
    if (Array.isArray(input[key])) {
      input[key].forEach(val => {
        params.append(key + '[]', val)
      })
    } else {
      params.append(key, input[key]);
    }
  }

  return '?' + params.toString();
}

function parse(input) {
  const payload = {};
  const params = new URLSearchParams(input);

  for(let [key, val] of params.entries()) {
    if (key.endsWith('[]')) {
      key = key.replace(/\[\]$/, '');
      if (payload[key]) {
        payload[key].push(val);
      } else {
        payload[key] = [val]
      }
    } else {
      payload[key] = val;
    }
  }

  return payload;
}

所以结果应该是"?ini=ini&itu=itu&ayo%5B%5D=desc&ayo%5B%5D=asc"。这类似于this example 中的数组格式。

请注意，这可能没有经过实战测试，但对我们来说，我们并没有真正复杂的对象结构。