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:
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!
