Manipulate URL parameters with map() method in JavaScript

Question

I need to map through an array so i can get all the notes pushed in an array params.createdNotes can i map inside the variable sortNotes so i can have a url like below :

/api/35678&page=1&notes[]=2&notes[]=4&notes[]=5

params.createdNotes = [2, 4, 5]

instance.fetchNotes = (params) => {
    let sortNotes =  (params.createdNotes.length === 0) ? '' : '&notes[]='+params.createdNotes;
    return  instance.get(
        '/api/'+params.section+'&page='+params.currentPage+sortNotes
    )
}

I suggest using the built-in [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) API so you don't have to fiddle with (and probably mess up) creating query strings yourself. — kelsny, Mar 24 '23 at 15:14
If you want an answer, you have to tell us what exactly `params` is. It looks like `params.section` starts with a `?`; otherwise, you wouldn't be creating a querystring. — kelsny, Mar 24 '23 at 15:20
section, currentPage and createdNotes are states, i gave the example of the array createdNotes because thats where i am having trouble i don't know how tu use map() to get multiple &notes[]=x in my url — Elichy, Mar 24 '23 at 15:23
Does this answer your question? [javascript modify url parameter array](https://stackoverflow.com/questions/36039033/javascript-modify-url-parameter-array) — Heretic Monkey, Mar 24 '23 at 15:55
Does this answer your question? [Adding parameters to URL, putting array in query string](https://stackoverflow.com/questions/39664019/adding-parameters-to-url-putting-array-in-query-string) — kelsny, Mar 24 '23 at 16:07

score 0 · Accepted Answer · answered Mar 24 '23 at 15:27

0

Use the built-in URLSearchParams API to take care of creating a valid querystring first. Then when we're done, call toString to get the resulting querystring.

const createdNotes = [2, 4, 5];

const params = new URLSearchParams();

createdNotes.forEach((note) => params.append("note[]", note));

console.log(params.toString());

In the context of your code:

instance.fetchNotes = (params) => {
  const params = new URLSearchParams();

  params.set("section", params.section); // or whatever
  params.set("page", params.currentPage);

  // append params
  params.createdNotes.forEach((note) => params.append("notes[]", note));

  return instance.get(
    "/api/?" + params.toString() // now we're done, turn into querystring
  );
};

answered Mar 24 '23 at 15:27

kelsny

23,009
3
19
48

1

This answer would be better suited on the duplicate – Heretic Monkey Mar 24 '23 at 15:55
params.toString() returns %5B%5D instead of [] and %26 instead of & – Elichy Mar 24 '23 at 15:56
@Elichy `%5B%5D` is explainable because that's the URI encoding of `[]`, but why are you using `&`? – kelsny Mar 24 '23 at 16:01
@HereticMonkey I don't think the target question is suitable. I think a better one would be https://stackoverflow.com/questions/39664019/adding-parameters-to-url-putting-array-in-query-string – kelsny Mar 24 '23 at 16:06
i am using & because of the structure of api, i might have for ex note[]=4&note[]=5&note[]=5 – Elichy Mar 24 '23 at 16:07
1

@Elichy You don't need `&`. `URLSearchParams` will handle creating the final query string for you. Are you even using `URLSearchParams` (like my answer uses)? – kelsny Mar 24 '23 at 16:08

Manipulate URL parameters with map() method in JavaScript

1 Answers1