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

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

Last Updated : 20 Jun, 2023

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.

JavaScript

// Declare an object
let obj = {
    p1: 'GFG',
    p2: 'Geeks',
    p3: 'GeeksForGeeks'
}

// Use JSON.stringify() function to
// convert object into string
console.log(JSON.stringify(obj));

// Function to Serialize an Object into a
// list of URL query parameters
function GFG_Fun() {
    let s = "";
    for (let key in obj) {
        if (s != "") {
            s += "&";
        }
        s += (key + "=" + encodeURIComponent(obj[key]));
    }
    console.log("'" + s + "'");
}

GFG_Fun();

Output

{"p1":"GFG","p2":"Geeks","p3":"GeeksForGeeks"}
'p1=GFG&p2=Geeks&p3=GeeksForGeeks'

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.

JavaScript

// Declare an object
let obj = {
    p1: 'GFG',
    p2: 'Geeks',
    p3: 'GeeksForGeeks'
}

// Use JSON.stringify() function to
// convert object into string
console.log(JSON.stringify(obj));

// Function to Serialize an Object into a
// list of URL query parameters
function GFG_Fun() {
    let s = Object.keys(obj).map(function (key) {
        return key + '=' + obj[key];
    }).join('&');

    console.log("'" + s + "'");
}

GFG_Fun();

Output

{"p1":"GFG","p2":"Geeks","p3":"GeeksForGeeks"}
'p1=GFG&p2=Geeks&p3=GeeksForGeeks'

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

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to read properties of an Object in JavaScript ?

Objects in JavaScript, it is the most important data type and forms the building blocks for modern JavaScript. These objects are quite different from JavaScriptâ€™s primitive data-types(Number, String, Boolean, null, undefined, and symbol) in the sense that these primitive data-types all store a singl

How to send a JSON object to a server using Javascript?

JavaScript Object Notation (JSON). It is a lightweight data transferring format. It is very easy to understand by human as well as machine. It is commonly used to send data from or to server. Nowadays it is widely used in API integration because of its advantages and simplicity.In this example we ar

How to get an object containing parameters of current URL in JavaScript ?

The purpose of this article is to get an object which contains the parameter of the current URL. Example: Input: www.geeksforgeeks.org/search?name=john&age=27 Output: { name: "john", age: 27 } Input: geeksforgeeks.org Output: {} To achieve this, we follow the following steps. Create an empty obj

How to parse JSON object using JSON.stringify() in JavaScript ?

In this article, we will see how to parse a JSON object using the JSON.stringify function. The JSON.stringify() function is used for parsing JSON objects or converting them to strings, in both JavaScript and jQuery. We only need to pass the object as an argument to JSON.stringify() function. Syntax:

Convert URL parameters to a JavaScript Object

Given an URL with parameters, The task is to get those parameters and convert them to a JavaScript Object using javascript. we're going to discuss a few techniques. Below is the following method to convert URL parameters to a JavaScript Object: Using replace() MethodUsing split() MethodUsing for ...