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来访问属性。

＆＃13;

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

＆＃13;

EDIT之二： .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

var 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 中的数组格式。

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

在URLSearchParams中使用json对象

6 个答案: