Add params to url with javascript

Question

hello I want to add some params to a url

let params = {doors: 4, color: red}
let request = new Request('/api/cars')
Object.keys(params).forEach(key => request.searchParams.append(key, params[key]))

but I´m getting the Cannot read property 'append' of undefined error

it works if I do

var url = new URL('https://example.com/api/cars');
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
let request = new Request(url)

but since I´m not using URL only relative urls I´m wondering if is not possible to append params to Request

check it out this issue, stackoverflow.com/questions/486896/… i hope this can help. — Mauricio
– Mauricio, Commented Feb 11, 2020 at 22:37
Does this answer your question? Adding a parameter to the URL with JavaScript — Maksym Bezruchko
– Maksym Bezruchko, Commented Feb 11, 2020 at 22:41

Titus · Accepted Answer · 2020-02-11 22:50:14Z

1

You can use a URLSearchParams object and append it to the URL string. Here is an example:

const params = {
  doors: 4,
  color: 'red'
};
const searchParams = new URLSearchParams();
Object.entries(params).forEach(([key, value]) => searchParams.append(key, value));

const request = new Request(`/api/cars?${searchParams.toString()}`);
console.log(request.url);

edited Feb 11, 2020 at 22:50

answered Feb 11, 2020 at 22:46

Titus

22.6k1 gold badge26 silver badges36 bronze badges

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

7 Comments

handsome Over a year ago

that´s exactly what I stopped doing because I don´t know the domain. yeah I know is dumb

Titus Over a year ago

You can get it using localtion.hostname.

Titus Over a year ago

@handsome I've edited my answer to include an example using URLSearchParams. You can use a relative URL with this solution.

Yannick Schröder Over a year ago

Now you always have a ugly question mark at the end of the route if params is empty. Is there it bettery way to add the params without something like searchParams.size ? '?' + searchParams.toString() : ''?

Titus Over a year ago

@YannickSchröder Yes, you can create a URL object, modify its searchParams and then use `/api/cars${url.search}`, here is an example

|

Addis · Accepted Answer · 2020-02-11 22:42:25Z

0

The Request() constructor creates a new Request object. So you should use it asynchronously with fetch:

let params = {doors: 4, color: red};
let request = new Request('/api/cars');

fetch(request).then(function(response) {
  Object.keys(params).forEach(key => response.searchParams.append(key, params[key]))
})

answered Feb 11, 2020 at 22:42

Addis

2,5402 gold badges16 silver badges21 bronze badges

Collectives™ on Stack Overflow

Add params to url with javascript

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related