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

Last Updated : 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:

My Personal Notes

Related Articles