adding multiple query params in angular 14

Question

I am building a multi item filter for my app and I need to send multiple queryparameters in API to get filtered items.

My question is that is there any other way than adding all the queryParams by hand since there are like 40-50 options to filter with. Can that somehow be done programmatically?

Pretty sure it would work if i manually made an object but im interested if there's a way to do it easier.

link to filter

Perhaps think this through - you have inputs, on an input change you have a collection of data that should be updated, then on submit you want that collection of data looped through and added as query params to a request. — Levidps, Dec 22 '22 at 00:42

score 0 · Answer 1 · answered Dec 22 '22 at 00:58

You could create an object to keep track of all the filter option.

Then simply use JSON.stringify to convert it to JSON.

You could also ignore the null and undefined value by passing in a replacer function.

let opt = {
    a: 'string',
    b: 5.1,
    c: true,
    d: { e: 'object' },
    f: ['array'],
    g: null,
    h: undefined,
  };
  
console.log(JSON.stringify(opt, (key, value) => {
    if (value !== null) return value;
}));

score 0 · Accepted Answer · answered Dec 22 '22 at 01:52

Yes, it is possible to programmatically generate query parameters.

You could maintain an array of param key/values using Object.entries to convert an object to an array of key/value pairs, and Object.fromEntries to convert from an array of key/value pairs back to an object.

const params = { currency: 'USD', language: 'en-US' }
// convert to [['currency', 'USD], ['language', 'en-US']]
const arrayOfParams = Object.entries(params) 
// convert back to { currency: 'USD', language: 'en-US' }
const paramsObj = Object.fromEntries(arrayOfParams)

Then use HttpParams to serialize/deserialize an object to query params:

import { HttpParams } from '@angular/common/http'
const paramsObj = { currency: 'USD', language: 'en-US'}
const params = new HttpParams({ fromObject: paramsObj })

/* Serializes the body to an encoded string, 
*  where key-value pairs (separated by =) are separated by &s. 
*/
const queryStr = params.toString()

adding multiple query params in angular 14

2 Answers2