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 in the variable.
• Then use JSON.stringify() method to convert a javascript object into strings and display the content.
• Next, take an empty string and append (key, value) pairs of objects to it by accessing every property of the object.

Example: This example serializes an object into a list of URL query parameters using JavaScript. 

html

<h1 style="color:green;">
    GeeksForGeeks
</h1>

<p id="GFG_UP">
</p>

<button onclick="GFG_Fun()">
    click here
</button>

<p id="GFG_DOWN">
</p>
<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>

Output:

Serialize an object into a list of URL query parameters

Approach 2:

• Declare an object and store it in the variable.
• Then use JSON.stringify() method to convert a 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 elements.

Example: This example uses the map() method and appends each key, and value pair to a string. 

html

<h1 style="color:green;">
    GeeksforGeeks
</h1>

<p id="GFG_UP">
</p>

<button onclick="GFG_Fun()">
    click here
</button>

<p id="GFG_DOWN">
</p>

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

Output:

Serialize an object into a list of URL query parameters