How to serialize an object into a list of URL query parameters using JavaScript ?

28 Jun, 2019
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:
JavaScript-Misc
javascript-object
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.