Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 28 Jun, 2019
Geek Week

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!




My Personal Notes arrow_drop_up
Recommended Articles
Page :