Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Last Updated : 04 Jan, 2023
Improve Article
Save Article

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

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

Serialize an object into a list of URL query parameters


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!