published: 04 Aug 2022
2 min read
How to send a JSON object as a parameter in HTTP requests in JavaScript
To send a JSON object or an array as a parameter in HTTP requests (GET or POST) in JavaScript, you first need to convert it into an string using the JSON.stringify() method.
Next, use the encodeURIComponent() method to encode the JSON string. It uses the UTF-8 encoding scheme and encodes all characters with special meaning except -_.!~*'().
Finally, you can append the encoded string to the URL and make an HTTP request.
Here is a complete example that uses the Fetch API to make a GET request in JavaScript and sends a JSON array as a parameter:
const users = [
{ name: 'John Deo', age: 23 },
{ name: 'Jane Doe', age: 21 }
]
const encodedData = encodeURIComponent(JSON.stringify(users))
fetch('https://www.example.com?users=${encodedData}')
.then(res => res.text())
.then(res => console.log(res))
.catch(err => console.error(err))
// Final URL: https://www.example.com/?users=%5B%7B%22name%22%3A%22John%20Deo%22%2C%22age%22%3A23%7D%2C%7B%22name%22%3A%22Jane%20Doe%22%2C%22age%22%3A21%7D%5D
Are we missing something? Help us improve this article. Reach out to us.
How to send a JSON object as a parameter in HTTP requests in JavaScript
To send a JSON object or an array as a parameter in HTTP requests (GET or POST) in JavaScript, you first need to convert it into an string using the JSON.stringify() method.
Next, use the encodeURIComponent() method to encode the JSON string. It uses the UTF-8 encoding scheme and encodes all characters with special meaning except -_.!~*'().
Finally, you can append the encoded string to the URL and make an HTTP request.
Here is a complete example that uses the Fetch API to make a GET request in JavaScript and sends a JSON array as a parameter:
const users = [
{ name: 'John Deo', age: 23 },
{ name: 'Jane Doe', age: 21 }
]
const encodedData = encodeURIComponent(JSON.stringify(users))
fetch('https://www.example.com?users=${encodedData}')
.then(res => res.text())
.then(res => console.log(res))
.catch(err => console.error(err))
// Final URL: https://www.example.com/?users=%5B%7B%22name%22%3A%22John%20Deo%22%2C%22age%22%3A23%7D%2C%7B%22name%22%3A%22Jane%20Doe%22%2C%22age%22%3A21%7D%5D
Are you looking for other code tips?
JS Nooby
Javascript connoisseur
