Collect the GET parameters as an array of strings when there is only one value

Question

Collect the GET parameters as an array of strings when there is only one value

How can I properly pass a string array as a parameter for a GET call?

// Passing one value
param: filters=Something
value: filters: 'Something'

// Passing multiple values
param: filters=Something&filters=Something else
value: filters: [ 'Something', 'Something else' ]

The issue arises when passing only one value in the param, as it is interpreted as a string instead of an array. On the other hand, passing more than one value results in the expected string array.

I have attempted using Array.from, but it only creates an array from the string:

['S', 'o', 'm', 'e', 't', 'h', 'i', 'n', 'g']

Is there a way to ensure that single values are recognized and processed as a String array?

Edit:

I understand the query but require filter values to accurately filter the results and return them. When there is a lone value in the filter parameter, it treats it as a string rather than an array. How can I retain a single array with a single string value in this scenario?

typescript get google-cloud-firestore

Answer 1

Answer №1

After receiving a comment from you:

You're not asking about creating the query, but how to extract a string array from the parameters even if it's just one value.

The solution involves iterating through the query string parameters and forming an array as you encounter the same parameter multiple times:

function extractParameters(query) {
  const map = new Map();
  for (const part of query.split("&")) {
    let [key, value] = part.split("=");
    key = decodeURIComponent(key); 
    value = decodeURIComponent(value);
    if (map.has(key)) {
      let current = map.get(key);
      if (Array.isArray(current)) {
        current.push(value);
      } else {
        map.set(key, [current, value]);
      }
    } else {
      map.set(key, value);
    }
  }
  return map;
}

const query1 = "filters=Something&foo=bar";
const query2 = "foo=bar&filters=Something&filters=Something%20else";

console.log("query1's params:", [...extractParameters(query1).entries()]);

console.log("query2's params:", [...extractParameters(query2).entries()]);

If you want an array every time for a specific parameter, modify the code accordingly:

const arrayParams = Object.assign(Object.create(null), {
  filters: true
});
function extractParameters(query) {
  const map = new Map();
  for (const part of query.split("&")) {
    let [key, value] = part.split("=");
    key = decodeURIComponent(key); 
    value = decodeURIComponent(value);
    if (arrayParams[key]) {
      if (map.has(key)) {
        map.get(key).push(value);
      } else {
        map.set(key, [value]);
      }
    } else {
      if (map.has(key)) {
        let current = map.get(key);
        if (Array.isArray(current)) {
          current.push(value);
        } else {
          map.set(key, [current, value]);
        }
      } else {
        map.set(key, value);
      }
    }
  }
  return map;
}

const query1 = "filters=Something&foo=bar";
const query2 = "foo=bar&filters=Something&filters=Something%20else";

console.log("query1's params:", [...extractParameters(query1).entries()]);

console.log("query2's params:", [...extractParameters(query2).entries()]);

Answer 2

After receiving a comment from you:

You're not asking about creating the query, but how to extract a string array from the parameters even if it's just one value.

The solution involves iterating through the query string parameters and forming an array as you encounter the same parameter multiple times:

function extractParameters(query) {
  const map = new Map();
  for (const part of query.split("&")) {
    let [key, value] = part.split("=");
    key = decodeURIComponent(key); 
    value = decodeURIComponent(value);
    if (map.has(key)) {
      let current = map.get(key);
      if (Array.isArray(current)) {
        current.push(value);
      } else {
        map.set(key, [current, value]);
      }
    } else {
      map.set(key, value);
    }
  }
  return map;
}

const query1 = "filters=Something&foo=bar";
const query2 = "foo=bar&filters=Something&filters=Something%20else";

console.log("query1's params:", [...extractParameters(query1).entries()]);

console.log("query2's params:", [...extractParameters(query2).entries()]);

If you want an array every time for a specific parameter, modify the code accordingly:

const arrayParams = Object.assign(Object.create(null), {
  filters: true
});
function extractParameters(query) {
  const map = new Map();
  for (const part of query.split("&")) {
    let [key, value] = part.split("=");
    key = decodeURIComponent(key); 
    value = decodeURIComponent(value);
    if (arrayParams[key]) {
      if (map.has(key)) {
        map.get(key).push(value);
      } else {
        map.set(key, [value]);
      }
    } else {
      if (map.has(key)) {
        let current = map.get(key);
        if (Array.isArray(current)) {
          current.push(value);
        } else {
          map.set(key, [current, value]);
        }
      } else {
        map.set(key, value);
      }
    }
  }
  return map;
}

const query1 = "filters=Something&foo=bar";
const query2 = "foo=bar&filters=Something&filters=Something%20else";

console.log("query1's params:", [...extractParameters(query1).entries()]);

console.log("query2's params:", [...extractParameters(query2).entries()]);

Collect the GET parameters as an array of strings when there is only one value

Answer №1

Similar questions

Components in Angular 4 that are loaded dynamically using attribute directives are enclosed within a <div> element

The parameter type 'Event' cannot be assigned to the argument type

Error: The property 'children' is not found in type '{ children?: ReactNode; }'

The name 'Queue' cannot be located in Typescript, error code ts(2304)

Encountering issues with `Partial<this['someProperty']>` usage in TypeScript

The server in Angular 4 does not pause for the http call to finish before rendering. This can result in faster loading

Having trouble rendering a Twitter timeline on an Angular 7 project

VS Code failing to refresh TypeScript in Vue files

Form submission returns JSON data with an undefined value from the server

What is the best way to sort an array based on a person's name?

What is the best way to choose a particular radio button from a group of radio buttons using typescript?

Increase the timestamp in Typescript by one hour

Issue: Unrecognized element type in next.js while starting development server

The art of integrating partial rendering into a template

Angular 7 - Implementing periodic JSON data retrieval from server and maintaining local storage within Angular application

The property 'x' is not found on 'Reel' type in this context

What are some ways to control providers in targeted tests using ng-mocks?

Populate a chart in real-time with data pulled directly from the Component

Having difficulty integrating requireJS and Node's Require in a single TypeScript project

Obtain the firebase object using Angular framework