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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.