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:
Please Login to comment...