We Keep Coding

how to make PHP interpret URL GET parameters as array?

I'm trying to interpret an array url param in PHP, but it's interpreted as string instead of an array.
On client side, the url is generated with js:
URL:
let url = window.location.href.split('?')[0] //example https://www.test.com
The get parameters are added with:
const params = encodeURIComponent(JSON.stringify(array));
url += "?array="+params;
for an example array of [1010,1020,1030], the final url looks like:
https://www.test.com?array=%5B%221010%22%2C%221020%22%2C%221030%22%5D
On server side (PHP), I'm using $_GET['array'] to get those data, the output looks like:
string(22) "["1010","1020","1030"]"
It is a syntactically correct array, but interpreted as string.
I know, I could use some string manipulations to get the array I want, but is there a way, that I can get an array right from scratch?

Either decode the current parameters as JSON...
$array = json_decode($_GET['array']);
or encode the array in a way PHP understands natively...
const params = new URLSearchParams();
array.forEach((val) => {
params.append("array[]", val); // note the "[]" suffix
});
url += `?${params}`;
$array = $_GET['array'] ?? [];

How to decode a url in JavaScript or NextJS?

In our NextJS application we have a URL that is fed with various query strings.
With some query strings, however, we have the problem that they are displayed in encoded form. For example like this:
http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo
As you can see, the colons are replaced with %CA.
I know that this may be a default behavior, but I need the colons in the URL.
Is there any way I can get this? So I need to URL above like:
http://localhost:8080/my-app/test-app?project=project:one&project=project:two
We are using URLSearchParams() like this:
const constructQueryString = (params: any) => {
const searchParams = new URLSearchParams();
const projects = params.project.split(',');
projects.forEach((p) => {
urlSearchParams.append('project', p);
});
return searchParams.toString();
};

These are escape codes for special characters in the URL that are necessary and cant be avoided. Also, there's no need for you to use URLSearchParams. Just use router.query will give you query and router.pathname for the path (/my-app/test-app) in nextJS

Use the decodeURIComponent global function in Javascript
const decodedPath = decodeURIComponent("http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo")
The Result is what you want as below:
http://localhost:8080/my-app/test-app?project=project:one&project=project:two

URL Parse Exercise (JavaScript)

So here is a description of the problem that I've been talked to solve:
We need some logic that extracts the variable parts of a url into a hash. The keys
of the extract hash will be the "names" of the variable parts of a url, and the
values of the hash will be the values. We will be supplied with:
A url format string, which describes the format of a url. A url format string
can contain constant parts and variable parts, in any order, where "parts"
of a url are separated with "/". All variable parts begin with a colon. Here is
an example of such a url format string:
'/:version/api/:collection/:id'
A particular url instance that is guaranteed to have the format given by
the url format string. It may also contain url parameters. For example,
given the example url format string above, the url instance might be:
'/6/api/listings/3?sort=desc&limit=10'
Given this example url format string and url instance, the hash we want that
maps all the variable parts of the url instance to their values would look like this:
{
version: 6,
collection: 'listings',
id: 3,
sort: 'desc',
limit: 10
}
So I technically have a semi-working solution to this but, my questions are:
Am I understanding the task correctly? I'm not sure if I'm supposed to be dealing with two inputs (URL format string and URL instance) or if I'm just supposed to be working with one URL as a whole. (my solution takes two separate inputs)
In my solution, I keep reusing the split() method to chunk the array/s down and it feels a little repetitive. Is there a better way to do this?
If anyone can help me understand this challenge better and/or help me clean up my solution, it would be greatly appreciated!
Here is my JS:
const obj = {};
function parseUrl(str1, str2) {
const keyArr = [];
const valArr = [];
const splitStr1 = str1.split("/");
const splitStr2 = str2.split("?");
let val1 = splitStr2[0].split("/");
let val2 = splitStr2[1].split("&");
splitStr1.forEach((i) => {
keyArr.push(i);
});
val1.forEach((i) => {
valArr.push(i);
});
val2.forEach((i) => {
keyArr.push(i.split("=")[0]);
valArr.push(i.split("=")[1]);
});
for (let i = 0; i < keyArr.length; i++) {
if (keyArr[i] !== "" && valArr[i] !== "") {
obj[keyArr[i]] = valArr[i];
}
}
return obj;
};
console.log(parseUrl('/:version/api/:collection/:id', '/6/api/listings/3?sort=desc&limit=10'));
And here is a link to my codepen so you can see my output in the console:
https://codepen.io/TOOTCODER/pen/yLabpBo?editors=0012

Am I understanding the task correctly? I'm not sure if I'm supposed to
be dealing with two inputs (URL format string and URL instance) or if
I'm just supposed to be working with one URL as a whole. (my solution
takes two separate inputs)
Yes, your understanding of the problem seems correct to me. What this task seems to be asking you to do is implement a route parameter and a query string parser. These often come up when you want to extract data from part of the URL on the server-side (although you don't usually need to implement this logic your self). Do keep in mind though, you only want to get the path parameters if they have a : in front of them (currently you're retrieving all values for all), not all parameters (eg: api in your answer should be excluded from the object (ie: hash)).
In my solution, I keep reusing the split() method to chunk the array/s
down and it feels a little repetitive. Is there a better way to do
this?
The number of .split() methods that you have may seem like a lot, but each of them is serving its own purpose of extracting the data required. You can, however, change your code to make use of other array methods such as .map(), .filter() etc. to cut your code down a little. The below code also considers the case when no query string (ie: ?key=value) is provided:
function parseQuery(queryString) {
return queryString.split("&").map(qParam => qParam.split("="));
}
function parseUrl(str1, str2) {
const keys = str1.split("/")
.map((key, idx) => [key.replace(":", ""), idx, key.charAt(0) === ":"])
.filter(([,,keep]) => keep);
const [path, query = ""] = str2.split("?");
const pathParts = path.split("/");
const entries = keys.map(([key, idx]) => [key, pathParts[idx]]);
return Object.fromEntries(query ? [...entries, ...parseQuery(query)] : entries);
}
console.log(parseUrl('/:version/api/:collection/:id', '/6/api/listings/3?sort=desc&limit=10'));
It would be even better if you don't have to re-invent the wheel, and instead make use of the URL constructor, which will allow you to extract the required information from your URLs more easily, such as the search parameters, this, however, requires that both strings are valid URLs:
function parseUrl(str1, str2) {
const {pathname, searchParams} = new URL(str2);
const keys = new URL(str1).pathname.split("/")
.map((key, idx) => [key.replace(":", ""), idx, key.startsWith(":")])
.filter(([,,keep]) => keep);
const pathParts = pathname.split("/");
const entries = keys.map(([key, idx]) => [key, pathParts[idx]]);
return Object.fromEntries([...entries, ...searchParams]);
}
console.log(parseUrl('https://www.example.com/:version/api/:collection/:id', 'https://www.example.com/6/api/listings/3?sort=desc&limit=10'));
Above, we still need to write our own custom logic to obtain the URL parameters, however, we don't need to write any logic to extract the query string data as this is done for us by using URLSearchParams. We're also able to lower the number of .split()s used as we can obtain use the URL constructor to give us an object with a parsed URL already. If you end up using a library (such as express), you will get the above functionality out-of-the-box.

construct a url with input parameters from json

I am receiving a json response to construct a parameterized string in JavaScript. However I need to pass actual parameters from JavaScript on some properties e.g. custom_input has to change dynamically.
[{
"road_name_gr": "custom_input"
"town_code" : 1
}]
Then I read that json file and convert that to a url.
cql_filter = new URLSearchParams(json_file).toString();
output: town_code=1&road_name_gr=custom_input
However I have to "modify" the url to accept input.
e.g. 'town_code=1&road_name_gr=' + my_custom_input

Try this:
my_custom_input = decodeURIComponent(my_custom_input) // URI Decode
let input_params = new URLSearchParams(json_file);
input_params.set("road_name_gr", my_custom_input);
cql_filter = input_params.toString();
You have to set parameter before obtain string value.

Get values of parameters from URL

I’m working on a tool which takes the value parameters in the URL and does a few things with them.
My issue is, I can’t seem to use document.location to show the specific value that I’m after, for example:
www.examplesite.com?yourname=gilgilad
I want to use document.location.search and put it in a var, I need that var's value to be "gilgilad".
Is this even possible using location.search?

location.search will return all after question mark including it. So there is universal js to get value of the first parameter (even if url has more parameters):
var desire = location.search.slice(1).split("&")[0].split("=")[1]
Example: let's take url http://example.com?name=jon&country=us
location.search will be equal to ?name=jon&country=us
.slice(1) skips the ?, returning the rest of the string.
.split("&")[0] splits it into two strings (name=jon and
country=us) and takes first one
.split("=")[1] splits name=jon into name and jon and takes the second one. Done!

let url = new URL('www.examplesite.com?yourname=gilgilad');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get('yourname'));
you can consider also to user window.location or window.location.search directly
let searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('yourname'));

A more generic solution to split the location.search query parameters and convert them into an object:
var a = location.search.split("&");
var o = a.reduce(function(o, v) {
var kv = v.split("=");
kv[0] = kv[0].replace("?", "");
o[kv[0]] = kv[1];
return o;
},
{});

To make ?yourname=gilgilad using document.location.search:
window.location.search = 'yourname=gilgilad';
here is jsfiddle: http://jsfiddle.net/t81k3bgc/
make sure to use console and then [run]. you will see:
For more information:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location#Example_.235.3A_Send_a_string_of_data_to_the_server_by_modifying_the_search_property.3A