Skip to main content
Code Review

Return to Question

deleted 43 characters in body; edited title
Source Link
Jamal
Jamal
  • 35.2k
  • 13
  • 134
  • 238

which is better and efficient way to build Building query params which append to URL in a browser in javascript?

I was looking for a similar JavaScript method for http_build_queryhttp_build_queryphp similar method in javascript but did not find but create my own and here I am a bit confused to decide the right approach.

so hereHere is the problem.

  I have an object of params and need to create query string to append with URL with help of encodeURIComponentencodeURIComponent. o:

Now there are two approaches when there is an array of strings are there

 . I name them pre-encodepre-encode and post-encode forpost-encode for now.

pre-encodepre-encode

applyApply encodeURIComponent to individual items and then join all items.

outputOutput

post-encodepost-encode

firstFirst, join all items then apply encodeURIComponent.

outputOutput

so my question is whichWhich approach is the more efficient and right and how to handle null and undefined values?

which is better and efficient way to build query params which append to URL in browser in javascript?

I was looking for http_build_queryphp similar method in javascript but did not find but create my own and here I am a bit confused to decide the right approach.

so here is the problem.

  I have an object of params and need to create query string to append with URL with help of encodeURIComponent. o

Now there are two approaches when there is an array of strings are there

  I name them pre-encode and post-encode for now

pre-encode

apply encodeURIComponent to individual items and then join all items

output

post-encode

first, join all items then apply encodeURIComponent

output

so my question is which approach is the more efficient and right and how to handle null and undefined values?

Building query params which append to URL in a browser

I was looking for a similar JavaScript method for http_build_query but did not find but create my own and here I am a bit confused to decide the right approach.

Here is the problem. I have an object of params and need to create query string to append with URL with help of encodeURIComponent:

Now there are two approaches when there is an array of strings are there. I name them pre-encode and post-encode for now.

pre-encode

Apply encodeURIComponent to individual items and then join all items.

Output

post-encode

First, join all items then apply encodeURIComponent.

Output

Which approach is the more efficient and right and how to handle null and undefined values?

Source Link
xkeshav
xkeshav
  • 121
  • 1
  • 7

which is better and efficient way to build query params which append to URL in browser in javascript?

I was looking for http_build_queryphp similar method in javascript but did not find but create my own and here I am a bit confused to decide the right approach.

so here is the problem.

I have an object of params and need to create query string to append with URL with help of encodeURIComponent. o

const params = {
    "name": ["alpha &", "beta"],
    "id": ["one", "&two=2"],
    "from": 1533735971000,
    "to": 1533822371147,
    "status": true
};

Now there are two approaches when there is an array of strings are there

I name them pre-encode and post-encode for now

pre-encode

apply encodeURIComponent to individual items and then join all items

const params = {
  "name": ["alpha &", "beta"],
  "id": ["one", "&two=2"],
  "from": 1533735971000,
  "to": 1533822371147,
  "status": true
};

const output = Object.entries(params).map((pair) => {
  const [key, val] = pair;
  if (val instanceof Array && val.length > 0) {
    let pre_encode = val.map(encodeURIComponent).join(',');
    console.log({pre_encode});
    const pre_qs = `${encodeURIComponent(key)}=${pre_encode}`;
    console.log({pre_qs})
    return pre_qs;
  } else {
    return pair.map(encodeURIComponent).join('=');
  }

}).join('&');


console.log({output});

output

"name=alpha%20%26,beta&id=one,%26two%3D2&from=1533735971000&to=1533822371147&status=true"

post-encode

first, join all items then apply encodeURIComponent

const params = {
  "name": ["alpha &", "beta"],
  "id": ["one", "&two=2"],
  "from": 1533735971000,
  "to": 1533822371147,
  "status": true
};

const output = Object.entries(params).map((pair) => {
  const [key, val] = pair;
  if (val instanceof Array && val.length > 0) {
    let post_encode = encodeURIComponent(val.join(','));
    console.log({post_encode});
    const post_qs = `${encodeURIComponent(key)}=${post_encode}`;
    console.log({post_qs})
    return post_qs;
  } else {
    return pair.map(encodeURIComponent).join('=');
  }

}).join('&');


console.log({output});

output

"name=alpha%20%26%2Cbeta&id=one%2C%26two%3D2&from=1533735971000&to=1533822371147&status=true"

so my question is which approach is the more efficient and right and how to handle null and undefined values?