Converting JSON data to a GET request string (query parameters) and vice versa is a common task when interacting with APIs. Here's a breakdown of how to do this:

1. Convert JSON to GET Request String (Query Parameters)
When you send data via a GET request, it's often serialized into query parameters. JSON data can be converted into a query string, where the keys and values are included in the URL.

Example of JSON to GET Request String (Query Parameters)
JSON Object:

json

{
"name": "Jane Doe",
"age": 28,
"city": "New York",
"isEmployed": true
}
This would be converted to a GET request string like:

pgsql

?name=Jane%20Doe&age=28&city=New%20York&isEmployed=true
JavaScript Code to Convert JSON to GET Request String
Here's how you can convert JSON to a query string in JavaScript:

javascript

function jsonToQueryString(json) {
return '?' + Object.keys(json)
.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key]))
.join('&');
}

const jsonData = {
"name": "Jane Doe",
"age": 28,
"city": "New York",
"isEmployed": true
};

const queryString = jsonToQueryString(jsonData);
console.log(queryString);
Output:

pgsql

?name=Jane%20Doe&age=28&city=New%20York&isEmployed=true
encodeURIComponent ensures that the values are URL-encoded, so special characters (like spaces) are properly encoded.
2. Convert GET Request String to JSON
To convert a GET request string (query parameters) into a JSON object, you need to parse the query string into key-value pairs and convert them into a JSON format.

Example of GET Request String:
pgsql

?name=Jane%20Doe&age=28&city=New%20York&isEmployed=true
This would be converted to the following JSON:

json

{
"name": "Jane Doe",
"age": 28,
"city": "New York",
"isEmployed": true
}
JavaScript Code to Convert GET Request String to JSON
Here's how you can parse a query string into a JSON object in JavaScript:

javascript

function queryStringToJson(queryString) {
const params = new URLSearchParams(queryString);
const json = {};

for (const [key, value] of params.entries()) {
// Convert the value to its correct type (e.g., string, number, boolean)
if (value === "true") {
json[key] = true;
} else if (value === "false") {
json[key] = false;
} else if (!isNaN(value)) {
json[key] = Number(value);
} else {
json[key] = value;
}
}

return json;
}

const queryString = "?name=Jane%20Doe&age=28&city=New%20York&isEmployed=true";
const jsonData = queryStringToJson(queryString);
console.log(jsonData);
Output:

json

{
"name": "Jane Doe",
"age": 28,
"city": "New York",
"isEmployed": true
}
URLSearchParams is a built-in JavaScript API that allows you to easily parse query parameters.
We also handle type conversion, converting strings like "true"/"false" to booleans and stringified numbers to actual numbers.
3. Example of Full Cycle (JSON to GET Request and Back)
Here's a full example where you can take a JSON object, convert it to a GET request string, and then convert the GET string back to JSON:

javascript

function jsonToQueryString(json) {
return '?' + Object.keys(json)
.map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key]))
.join('&');
}

function queryStringToJson(queryString) {
const params = new URLSearchParams(queryString);
const json = {};

for (const [key, value] of params.entries()) {
if (value === "true") {
json[key] = true;
} else if (value === "false") {
json[key] = false;
} else if (!isNaN(value)) {
json[key] = Number(value);
} else {
json[key] = value;
}
}

return json;
}

// Step 1: JSON to GET Request String
const jsonData = {
"name": "Jane Doe",
"age": 28,
"city": "New York",
"isEmployed": true
};

const queryString = jsonToQueryString(jsonData);
console.log("GET Request String:", queryString);

// Step 2: GET Request String to JSON
const backToJson = queryStringToJson(queryString);
console.log("Back to JSON:", backToJson);
Output:

pgsql

GET Request String: ?name=Jane%20Doe&age=28&city=New%20York&isEmployed=true
Back to JSON: { name: 'Jane Doe', age: 28, city: 'New York', isEmployed: true }
4. Additional Considerations
Nested Objects: Query strings are typically flat (i.e., they don't support nested structures). However, you can represent nested data by using dot notation (e.g., address.street=123 Main St), or by serializing nested objects into a string and parsing them back when needed.

Arrays: When you have arrays, you can represent them as repeated query parameters (e.g., skills=JavaScript&skills=React&skills=Node.js), or as a single parameter with a serialized array string.

Conclusion
JSON to GET Request String: This is done by serializing the keys and values of the JSON into query parameters using encodeURIComponent to ensure they are properly URL-encoded.
GET Request String to JSON: You can use URLSearchParams to easily parse the query string back into a JSON object, handling type conversion for booleans and numbers.