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, https://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript i hope this can help. — Mauricio, Feb 11 '20 at 22:37
Does this answer your question? [Adding a parameter to the URL with JavaScript](https://stackoverflow.com/questions/486896/adding-a-parameter-to-the-url-with-javascript) — Maksym Bezruchko, Feb 11 '20 at 22:41

Titus · Answer 1 · 2020-02-11T22:50:14.330

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 '20 at 22:50

answered Feb 11 '20 at 22:46

Titus

22,031
1
23
33

that´s exactly what I stopped doing because I don´t know the domain. yeah I know is dumb – handsome Feb 11 '20 at 22:48
You can get it using `localtion.hostname`. – Titus Feb 11 '20 at 22:48
@handsome I've edited my answer to include an example using `URLSearchParams`. You can use a relative URL with this solution. – Titus Feb 11 '20 at 22:50

score 0 · Answer 2 · answered Feb 11 '20 at 22:42

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]))
})

Add params to url with javascript

2 Answers2