Building query params which append to URL in a browser

Question

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:

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"

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

Answer 1

Your main question

I have trouble understanding it, because:

• minor reason:
  (unless I'm missing something obvious) whatever way you encode the array parts, the resulting query string is quite valid in both cases;
  so the only possible criterion for choosing a method rather than the other one would be to find which one is faster... and this sounds a bit overkill!
• major reason:
  you initially referred to the PHP http_build_query() function, so I'd expect you work the same, i.e. for a given key: [val_1, val_2]:
  • you're currently returning key=val_1,val_2
  • while it should be key=val_1&key=val_2

To match the latter case, I'd suggest something like this:

const output = Object.entries(params).map(
  (pair) => {
    let [key, val] = pair;
    // normalize val to always an array
    val = (val instanceof Array) ? val : [val];
    // encode key only once
    key = encodeURIComponent(key);
    // then make a different query string for each val member
    return val.map(
      (member) => `${key}=${encodeURIComponent(member)}`
    ).join('&');
  }
).join('&');

Your complementary question

To implement null or undefined, first you have to decide how they must be managed: they might be simply omitted, or included with no value (its often useful to have query params where only its presence/absence is meaningful for the underlying application).

Anyway you may simply add any of these capabilities; instead of

    return val.map(
      (member) => `${key}=${encodeURIComponent(member)}`
    ).join('&');

you can include null/undefined params simply with:

return val.map(
  (member) => (member ? `${key}=${encodeURIComponent(member)}` : `${key}`)
).join('&');

(NOTE: it's up to you to enhance this with more precise tests if desired, in order to keep 0 as key=0, or '' as key=)

or you can omit them with a slightly different method:

return val.reduce(
  (result, member) => {
    if (member) {
      result.push(`${key}=${encodeURIComponent(member)}`);
    }
    return result;
  },
  []
).join('&');