Adding Query Parameters to URL using Google Apps Script

submit.md

Adding Query Parameters to URL using Google Apps Script

Updated on February 5, 2024

This is for adding the query parameters to the URL. These scripts can be also used for Javascript. When I created an endpoint with some query parameters, I had used the scripts of various patterns every time. Today, I prepared this sample script to unify them. If this is also useful for you, I'm glad.

Sample script (With V8 runtime):

String.prototype.addQuery = function (obj) {
  return (this == "" ? "" : `${this}?`) + Object.entries(obj).flatMap(([k, v]) => Array.isArray(v) ? v.map(e => `${k}=${encodeURIComponent(e)}`) : `${k}=${encodeURIComponent(v)}`).join("&");
}


function myFunction1() {
  const url = "https://sampleUrl";
  const query = {
    query1: ["value1A", "value1B", "value1C"],
    query2: "value2A, value2B",
    query3: "value3A/value3B",
  };
  const endpoint = url.addQuery(query);
  console.log(endpoint); // https://sampleUrl?query1=value1A&query1=value1B&query1=value1C&query2=value2A%2C%20value2B&query3=value3A%2Fvalue3B
}

// In this case, only the query parameter is exported. This value can be used for requesting with Form data.
function myFunction2() {
  const url = "";
  const query = {
    query1: ["value1A", "value1B", "value1C"],
    query2: "value2A, value2B",
    query3: "value3A/value3B",
  };
  const endpoint = url.addQuery(query);
  console.log(endpoint); // query1=value1A&query1=value1B&query1=value1C&query2=value2A%2C%20value2B&query3=value3A%2Fvalue3B
}

• https://jsfiddle.net/f92arp5m/

Sample script (Without V8 runtime):

String.prototype.addQuery = function (obj) {
  return this + Object.keys(obj).reduce(function (p, e, i) {
    return p + (i == 0 ? "?" : "&") +
      (Array.isArray(obj[e]) ? obj[e].reduce(function (str, f, j) {
        return str + e + "=" + encodeURIComponent(f) + (j != obj[e].length - 1 ? "&" : "")
      }, "") : e + "=" + encodeURIComponent(obj[e]));
  }, "");
}


function myFunction() {
  var url = "https://sampleUrl";
  var query = {
    query1: ["value1A", "value1B", "value1C"],
    query2: "value2A, value2B",
    query3: "value3A/value3B",
  };
  var endpoint = url.addQuery(query);
  Logger.log(endpoint);
}

• https://jsfiddle.net/jka8u3wx/

Result:

Both sample scripts return the following URL including the query parameters.

https://sampleUrl?query1=value1A&query1=value1B&query1=value1C&query2=value2A%2C%20value2B&query3=value3A%2Fvalue3B

Thanks. Works as expected.

great stuff :) thanks 👍

Thanks

Thank you. It's exactly what I was looking for.

@ncamaa @nils-holmberg @jeanniton-mnr @riveruniversity Thank you, too!

Man, you know stumble onto gold when you start googling after wasting 2 hours trying to figure it out. And then BAM. This.

Thank you dude, from future me.

This is briliant, I didn't know prototype can work in App Script. Thanks! :D

👋 thx for sharing, very useful. One thing that needs revisiting is values with spaces. URLSearchParams and encodeURIComponents work different in this case; the first one produces "foo+bar" while the latter "foo%20bar" which might not work in some cases.

Amazing, works super well. Thank you so much