Develop Reference

How to get url parameters with same name from URL in js?

For example I have this url
https://www.test.com/test.html?categoryid=4&test1=12&test2=65&brand[0]=val1&brand[1]=val2&test3=15
Now how do I get value of brand[0]=val1&brand[1]=val2 but it can be any number of there in the url maybe brand[2],brand[3] etc... or none url can be without this parameter
I need to get if brand parameter is in url and if yes then I need to get all which are availabe in the url
Any help would be great!

So you don't really know if there would be parameters or not so that's why I can propose this solution right here it will parse all your parameters anyways and stack them in the config JSON in case there is no parameters config would be empty then on your DOMloaded event you can handle the cases as you want
const config = {};
const loadConfig = () => {
const urlQuery = new URLSearchParams(window.location.search);
urlQuery.forEach((e, k) => {
config[k] = e;
});
};
const onLoadEvent = () => {
console.log(config) // should contain all the query string params.
}

How to get nested query string parameter

The use case is to land on a page with a URL looking like this -
http://localhost:3000/track?url=https://somewebsite.com/?968061242&lang=EN&sign=daff4be265096eb31aca5c986ac51c6c&source=api_wrapper
I tried the following to get the query params,
let search = window.location.search;
let params = new URLSearchParams(search);
let resp = params.get('url');
console.log("resp => ", resp);
but the output I get is only up to https://somewebsite.com/?968061242
How I can also get the nested params as part of the same get method call?

Use urlencoding api of JS
Example:
const url = `http://localhost:3000/track?url=${encodeURIComponent('https://somewebsite.com/?968061242&lang=EN&sign=daff4be265096eb31aca5c986ac51c6c&source=api_wrapper')}`
let search = new URL(url).search;
let params = new URLSearchParams(search);
let resp = params.get('url');

Best way to add query param to all navigations

I am looking for a solution to add query param on each URL after navigation using WebDriverIO.
For example:
Base URL: https://www.google.com/?block=true
When I click a button on the page loaded from the above URL, new URL that loads is https://www.google.com/search-page.
I would like to append ?block=true to all the navigations.
For the base URL, I can use the method browser.url("https://www.google.com/?block=true"). Not sure how I can add to other pages that are navigated using click actions.

You can use URLSearchParams to generate complex search params. Check out the below example.
const baseUrl = "https://www.google.com/?block=true"; // window.location.href
const searchUrl = "https://www.google.com/search?test=testparam";
function getRedirectUrl(baseUrl, newUrl) {
let oldParms = new URL(baseUrl).searchParams;
const newUrlParams = new URL(newUrl).searchParams;
for(let [value, key] of oldParms.entries()){
newUrlParams.append(key, value);
}
const newSearch = new URL(newUrl).search;
return `${newUrl.slice(0, -1 * newSearch.length)}?${newUrlParams.toString()}`;
}
console.log(getRedirectUrl(baseUrl, searchUrl));

how do i extract id parameter from an URL using reactjs

http://localhost:3000/messages/?qr_asset_id=1f6b997464&gts=1627828213
this is an URL, I need to extract the qr_asset_id value from this URL
how do I do this with reactjs

As you're using hooks based on your used tags:
const location = useLocation();
const urlParams = new URLSearchParams(location.search);
const paramValue = urlParams.get('qr_asset_id');

You pull it from the props. props.match.params.qr_asset_id

You can use URLSearchParams.
check for browser compatibility first
const url = window.location.href // "http://localhost:3000/messages/?qr_asset_id=1f6b997464&gts=1627828213";
const searchParams = new URLSearchParams(url);
const qrAssetId = searchParams.get("qr_asset_id"); // 1f6b997464
query parameter guide in react-router should help.
There are url-polyfill libraries out there too. You can use them to get the same result.
url-polyfill
whatwg-url

How do I pass along variables with XMLHTTPRequest

How do I send variables to the server with XMLHTTPRequest? Would I just add them to the end of the URL of the GET request, like ?variable1=?variable2=, etc?
So more or less:
XMLHttpRequest("GET", "blahblah.psp?variable1=?" + var1 + "?variable2=" + var2, true)

If you want to pass variables to the server using GET that would be the way yes. Remember to escape (urlencode) them properly!
It is also possible to use POST, if you dont want your variables to be visible.
A complete sample would be:
var url = "bla.php";
var params = "somevariable=somevalue&anothervariable=anothervalue";
var http = new XMLHttpRequest();
http.open("GET", url+"?"+params, true);
http.onreadystatechange = function()
{
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(null);
To test this, (using PHP) you could var_dump $_GET to see what you retrieve.

Manually formatting the query string is fine for simple situations. But it can become tedious when there are many parameters.
You could write a simple utility function that handles building the query formatting for you.
function formatParams( params ){
return "?" + Object
.keys(params)
.map(function(key){
return key+"="+encodeURIComponent(params[key])
})
.join("&")
}
And you would use it this way to build a request.
var endpoint = "https://api.example.com/endpoint"
var params = {
a: 1,
b: 2,
c: 3
}
var url = endpoint + formatParams(params)
//=> "https://api.example.com/endpoint?a=1&b=2&c=3"
There are many utility functions available for manipulating URL's. If you have JQuery in your project you could give http://api.jquery.com/jquery.param/ a try.
It is similar to the above example function, but handles recursively serializing nested objects and arrays.

If you're allergic to string concatenation and don't need IE compatibility, you can use URL and URLSearchParams:
const target = new URL('https://example.com/endpoint');
const params = new URLSearchParams();
params.set('var1', 'foo');
params.set('var2', 'bar');
target.search = params.toString();
console.log(target);
Or to convert an entire object's worth of parameters:
const paramsObject = {
var1: 'foo',
var2: 'bar'
};
const target = new URL('https://example.com/endpoint');
target.search = new URLSearchParams(paramsObject).toString();
console.log(target);

The correct format for passing variables in a GET request is
?variable1=value1&variable2=value2&variable3=value3...
^ ---notice &--- ^
But essentially, you have the right idea.

Following is correct way:
xmlhttp.open("GET","getuser.php?fname="+abc ,true);

Yes that's the correct method to do it with a GET request.
However, please remember that multiple query string parameters should be separated with &
eg. ?variable1=value1&variable2=value2

How about?
function callHttpService(url, params){
// Assume params contains key/value request params
let queryStrings = '';
for(let key in params){
queryStrings += `${key}=${params[key]}&`
}
const fullUrl = `${url}?queryStrings`
//make http request with fullUrl
}