How to serialize an object into a list of URL query parameters using JavaScript ?
Given a JavaScript Object and the task is to serialize it into a URL query parameters using JavaScript.
Approach 1:
- Declare an object and store it into the variable.
- Then use JSON.stringify() method to convert javascript object into string and display the content.
- Next, take an empty string and append (key, value) pairs of object to it by accessing the every property of object.
Example: This example serialize an object into a list of URL query parameters using JavaScript.
<!DOCTYPE HTML> < html > < head > < title > Serialize an Object into a list of URL query parameters in JavaScript </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 19px; font-weight: bold;" > </ p > < button onclick = "GFG_Fun()" > click here </ button > < p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;" > </ p > <!-- Script to Serialize an Object into a list of URL query parameters --> < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); // Declare an object var obj = { p1: 'GFG', p2: 'Geeks', p3: 'GeeksForGeeks' } // Use JSON.stringify() function to // convert object into string el_up.innerHTML = JSON.stringify(obj); // Function to Serialize an Object into a // list of URL query parameters function GFG_Fun() { var s = ""; for (var key in obj) { if (s != "") { s += "&"; } s += (key + "=" + encodeURIComponent(obj[key])); } el_down.innerHTML = "'" + s + "'"; } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Approach 2:
- Declare an object and store it into the variable.
- Then use JSON.stringify() method to convert javascript object into string and display the content.
- Use map() method to append the object key value pair and use join() method to join all object element.
Example: This example uses the map() method and appends each key, value pair to string.
<!DOCTYPE HTML> < html > < head > < title > Serialize an Object into a list of URL query parameters in JavaScript </ title > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 19px; font-weight: bold;" > </ p > < button onclick = "GFG_Fun()" > click here </ button > < p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;" > </ p > <!-- Script to Serialize an Object into a list of URL query parameters --> < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); // Declare an object var obj = { p1: 'GFG', p2: 'Geeks', p3: 'GeeksForGeeks' } // Use JSON.stringify() function to // convert object into string el_up.innerHTML = JSON.stringify(obj); // Function to Serialize an Object into a // list of URL query parameters function GFG_Fun() { var s = Object.keys(obj).map(function(key) { return key + '=' + obj[key]; }).join('&'); el_down.innerHTML = "'" + s + "'"; } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button: