JSON is a popular format for sending data over the network. Here's an example of JSON containing an object with props and values:
json
{"name": "Joker","city": "Gotham","isVillain": true,"friends": []}
In this post, you'll learn how to use fetch()
to load or post JSON data.
Before I go on, let me recommend something to you.
If you want to significantly improve your JavaScript knowledge, take the amazingly useful course "Modern JavaScript From The Beginning 2.0" by Brad Traversy. Use the coupon code "DMITRI" and get 20% discount!
1. Recalling fetch()
fetch()
accepts 2 arguments:
javascript
const response = await fetch(urlOrRequest[, options]);
The first obligatory argument of fetch()
is the URL of the request, or generally a request object.
options
, the optional second argument, configures the request. The most useful options are:
options.method
: the HTTP method to perform the request. Defaults to'GET'
options.body
: the body of the HTTP requestoptions.headers
: an object with the headers to attach to the request
Calling fetch()
starts a request and returns a promise. When the request completes, the promise resolves to the response object.
Response object provides useful methods for extracting data from a variety of formats. But to parse data from JSON, you only need one method — response.json().
2. GET JSON data
Let's fetch from the path /api/names
a list of persons in JSON format:
javascript
async function loadNames() {const response = await fetch('/api/names');const names = await response.json();console.log(names);// logs [{ name: 'Joker'}, { name: 'Batman' }]}loadNames();
await fetch('/api/names')
starts a GET
request, and returns a response object when the request completes.
Then, from the server response, you can extract the JSON into a plain JavaScript object using await response.json()
(note: response.json()
returns a promise!).
By default fetch()
performs a GET
request. But you can always indicate the HTTP method explicitly:
javascript
// ...const response = await fetch('/api/names', {method: 'GET'});// ...
2.1 Explicitly asking for JSON
Some API servers might work with multiple formats: JSON, XML, etc. That's why these servers might require to indicate the format of the posted data.
Just use the headers
option, and specifically set Accept
header to application/json
to explicitly ask for JSON:
javascript
// ...const response = await fetch('/api/names', {headers: {'Accept': 'application/json'}});// ...
When making the request, the server will understand that you're asking for data in JSON format.
3. POST JSON data
POST
-ing JSON data to the server is slightly trickier.
First, indicate the HTTP method
as 'POST'
.
Second, set the body
parameter with the object's JSON (as a string).
javascript
async function postName() {const object = { name: 'James Gordon' };const response = await fetch('/api/names', {method: 'POST',body: JSON.stringify(object)});const responseText = await response.text();console.log(responseText); // logs 'OK'}postName();
Take a look at body
option value. JSON.stringify(object)
utility function stringifies the JavaScript object into a JSON string.
body
option requires a string, but not an object.
This approach works for POST
, but also for PUT
and PATCH
requests.
3.1 Explicitly posting JSON
Again, some servers might require you to indicate explicitly that you POST
(or PATCH
, or PUT
) data in JSON format.
In such a case, specify the content type of the data you're pushing, in particular by setting the Content-Type
header to application/json
.
javascript
// ...const object = { name: 'James Gordon' };const response = await fetch('/api/names', {method: 'POST',body: JSON.stringify(object),headers: {'Content-Type': 'application/json'}});// ...
4. Using a request object
In the examples above options
argument of fetch(URL, option)
was used to set the method
, headers
, and body
options.
But sometimes you might want to encapsulate the request data into an object, thus Request becomes handy.
For example, let's post JSON data by creating a request object:
javascript
// ...const object = { name: 'James Gordon' };const request = new Request('/api/names', {method: 'POST',body: JSON.stringify(object),headers: {'Content-Type': 'application/json'}});const response = await fetch(request);// ...
5. Conclusion
When loading data, make sure to extract and parse JSON to an actual object from the response using const object = await response.json()
method.
However, when posting JSON data, be sure to indicate the stringified object into a JSON string using JSON.stringify(object)
. Assign the JSON to the body
option of the request.
Would you like to know more on how to use fetch()
? I recommend checking How to Use Fetch with async/await.