using json objects in URLSearchParams

Question

Is it possible to somehow append json objects onto a URLSearchParams object?

So instead of:

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

it's:

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

My answer courtesy of Darshak Gajjar's answer

Can use json objects via this way:

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

Derek · Accepted Answer · 2017-10-04 08:29:45Z

20

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

Something like this might work urlSearchParams = Object.assign(urlSearchParams, {search: "person"});

EDIT: Alternate solution using vanilla javascript. Also, I thought URLSearchParams was just a normal js object, but in fact you have to use get, set and append to access properties.

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

EDIT bis: .append() supports to re-use the same key/parameter name, while .set() would have overwritten a previous value.

edited Oct 4, 2017 at 8:29

Derek

3,3553 gold badges26 silver badges32 bronze badges

answered Dec 14, 2016 at 5:43

murtuza

1,1698 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A. L Over a year ago

I tried this let search = Object.assign(urlSearchParams, {number: '5'}); but it didn't seem to work.

murtuza Over a year ago

i tried code like that in the chrome console and it worked. what browser are you working with? let is a newer keyword so maybe try it with just var. Also, the Object.assign method is not available in IE as per the documentation

jsejcksn Over a year ago

Just a note of caution: If you want to retain existing parameters with the same name, append should be used instead of set. URLSearchParams on MDN

Darshak · Accepted Answer · 2016-12-14 05:44:56Z

4

May be using below code you can pass entire json object in URL Search param

var json = JSON.stringify(myObj);

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

answered Dec 14, 2016 at 5:44

Darshak

8677 silver badges18 bronze badges

3 Comments

A. L Over a year ago

I'm actually using this.http.post so it doesn't work for me :(

Darshak Over a year ago

you can also use post same way this.http.post('url'+'?myobj='+encodeURIComponent(json))

A. L Over a year ago

If I could mark two answers I would mark yours too, but the other answer is better suited to the question :(

Mercury · Accepted Answer · 2023-02-14 07:43:09Z

4

Super simple answer/example:

// Create:
const params = new URLSearchParams({
  a: 1,
  b: 2
})
// OR
// const params = new URLSearchParams("a=1&b=2")

// Append
params.append('c', 'woohoo') // Note: if c param already exists in params, this will replace it (won't be adding new param if already exists, hence no duplications)

console.log(params.toString())
// Prints: 'a=1&b=2&c=woohoo'

edited Feb 14, 2023 at 7:43

answered Sep 18, 2022 at 11:09

Mercury

8,0683 gold badges52 silver badges65 bronze badges

Comments

Ricky Levi · Accepted Answer · 2017-07-15 14:19:35Z

Want to share my answer for Angular2 with the option of sending an Array This is how I use this get function:

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

And the service is something like:

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

Barthy · Accepted Answer · 2019-05-23 12:16:51Z

3

There's no API for that. You just need to enumerate over the properties and append them manually, for example using the following function:

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

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

edited May 23, 2019 at 12:16

Barthy

3,2511 gold badge27 silver badges43 bronze badges

answered Dec 14, 2016 at 6:07

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

1 Comment

A. L Over a year ago

is it possible to send an array with that?

praburangki · Accepted Answer · 2021-06-03 02:42:14Z

Here is my approach. We have a simple requirement where the object is only a key value pair where the value might be a string or an array. We haven't found a use case for nested objects.

So let's say we want to convert this object into a query string or vice versa:

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

Then we have two functions to parse & stringify:

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

So the result should be "?ini=ini&itu=itu&ayo%5B%5D=desc&ayo%5B%5D=asc". This is similar to the array format that is found in this example.

Please note that this might not be battle tested, but for us we don't really have complicated object structure.

jimmont · Accepted Answer · 2022-01-30 22:09:20Z

1

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

edited Jan 30, 2022 at 22:09

answered Mar 14, 2019 at 3:35

jimmont

2,5731 gold badge28 silver badges31 bronze badges

Comments

Aleksandr Smyshliaev · Accepted Answer · 2024-11-19 17:11:06Z

-1

It is indeed


import { useUrlState } from 'state-in-url/next';

const form: Form = {
  search: '',
  someObj: undefined
};

type Form = {
  name: string;
  someObj?: { sort: 'abc' | 'desc' }
};

export const useFormState = () => {
  const { urlState, setUrl, reset } = useUrlState(form);

  const handleUpdate = (val) => {
    setUrl({ name: val, someObj: { sort: 'desc' } })
  }

answered Nov 19, 2024 at 17:11

Aleksandr Smyshliaev

4284 silver badges10 bronze badges

Collectives™ on Stack Overflow

using json objects in URLSearchParams

8 Answers 8

3 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related