This content originally appeared on Go Make Things and was authored by Go Make Things
Today, we’re going to look at how to build a query string using a data object with vanilla JS. This used to be kind of tedious, but a few new JavaScript methods have made it a lot easier.
Let’s dig in!
An example
Let’s say you have an object of data, like this.
let petfinderData = {
key: '12345',
shelterID: 'abc00',
count: 20,
animals: ['dogs', 'cats']
};
You want to convert it into a query string that you can send along with an API request, like this.
let endpoint = 'https://api.petfinder.com?key=12345&shelterID=abc00&count=20&animals=dogs%2Ccats';
How would you do that?
The URLSearchParams() method
The URLSearchParams() method was built specifically for creating and manipulating query string data.
To create a URLSearchParams object, we can use the new URLSearchParams() constructor, passing in our data object as an argument.
let query = new URLSearchParams(petfinderData);
Once you have a URLSearchParams object, you can use a variety of methods to get and add values to the data, if needed.
In our case, we just need to get a query string, which we can do with the URLSearchParams.toString() method.
This automatically encodes any data in our object for us, and returns a query string.
let query = new URLSearchParams(petfinderData);
// returns "key=12345&shelterID=abc00&count=20&animals=dogs%2Ccats"
let queryString = query.toString();
We can use it to create our URL like this.
let endpoint = `https://api.petfinder.com?${queryString}`;
A helper function
I’ve put together a little helper function, buildQuery(), that you can use to more easily create query strings from objects.
/*!
* Build a query string from an object of data
* (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
* @param {Object} data The data to turn into a query string
* @return {String} The query string
*/
function buildQuery (data) {
return new URLSearchParams(data).toString();
}
let petfinderData = {
key: '12345',
shelterID: 'abc00',
count: 20,
animals: ['dogs', 'cats']
};
let endpoint = `https://api.petfinder.com?${buildQuery(petfinderData)}`;
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-04-05T14:30:00+00:00) How to build a query string from an object of data with vanilla JS. Retrieved from https://www.scien.cx/2021/04/05/how-to-build-a-query-string-from-an-object-of-data-with-vanilla-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.