The fetch() Method
JSON is often stored in files or returned by calls to web servers.
JavaScript can load JSON and convert it into JavaScript values.
The modern way to load JSON is with the fetch() method.
Note: This chapter assumes that you are familiar with fetch(). If not, see the JavaScript Fetch API tutorial.
A JSON File
JSON files normally use the .json extension.
customer.json
{
"id": 101,
"name": "John Doe",
"city": "New York",
"member": true
}
Loading JSON
Use the fetch() method to request the JSON file.
The response.json() method parses the JSON text and returns a JavaScript value.
Example
async function loadJSON() {
const response = await fetch("customer.json");
const customer = await response.json();
myDisplayer(customer.name);
}
loadJSON();
Loading a JSON Array
If the file contains a JSON array, response.json() returns a JavaScript array.
products.json
[
{"name":"Laptop","price":899},
{"name":"Mouse","price":29},
{"name":"Keyboard","price":79}
]
Example
async function loadProducts() {
const response = await fetch("products.json");
const products = await response.json();
myDisplayer(products[0].name);
myDisplayer(products[0].price);
}
loadProducts();
Checking for Errors
The fetch() method does not throw an error for HTTP errors such as 404.
Check the ok and status properties before reading the JSON file.
Example
async function loadJSON(file) {
const response = await fetch(file);
myDisplayer(response.ok);
myDisplayer(response.status);
const customer = await response.json();
myDisplayer(customer.name);
}
loadJSON("customer.json");
Handling Errors
Use try...catch to handle loading errors.
Example
async function loadJSON(file) {
try {
const response = await fetch(file);
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const customer = await response.json();
myDisplayer(customer.name);
}
catch(err) {myDisplayer(err.message)}
}
loadJSON("customer.json");
Loading Multiple JSON Files
Independent downloads can run in parallel.
Example
// Async function to download files
async function loadData() {
const [customerResponse, productsResponse, newsResponse] = await Promise.all([
fetch("customer.json"),
fetch("products.json"),
fetch("news.json")
]);
const customer = await customerResponse.json();
const products = await productsResponse.json();
const news = await newsResponse.json();
myDisplayer("Custome name: " + customer.name);
myDisplayer(products.length + " products");
myDisplayer(news.length + " news items");
}
// Call the async function
loadData();
Sending JSON
The fetch() method can also send JSON to a web server.
Use the POST method to send new data.
Convert the JavaScript object to JSON text with JSON.stringify().
Example
const person = {
name: "John",
age: 30
};
const response = await fetch("/api/person", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(person)
});
The Request Options
The second argument of fetch() contains the request options.
| Col 1 | Col 2 |
|---|---|
| Option | Description |
| method | The HTTP request method, such as POST. |
| headers | Additional information about the request. |
| body | The data sent with the request. |
The Content-Type Header
The Content-Type header tells the server what type of data is being sent.
Example
headers: {
"Content-Type": "application/json"
}
Note: The value application/json tells the server that the request body contains JSON.
The Request Body
The request body must contain text, not a JavaScript object.
Use JSON.stringify() to convert the object into JSON text.
Example
body: JSON.stringify(person)
Reading the Server Response
A server can return JSON after receiving the request.
Use response.json() to read the returned JSON.
Example
const person = {
name: "John",
age: 30
};
const response = await fetch("/api/person", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(person)
});
const result = await response.json();
document.getElementById("demo").textContent = result.message;
Checking the Response
The fetch() method does not reject its Promise for HTTP errors such as 404 or 500.
Check the response.ok property before reading the response.
Example
const response = await fetch("/api/person", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(person)
});
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const result = await response.json();
Sending JSON with Error Handling
Use try...catch to handle request and response errors.
Example
async function sendPerson() {
const person = {
name: "John",
age: 30
};
try {
const response = await fetch("/api/person", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(person)
});
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const result = await response.json();
document.getElementById("demo").textContent =
result.message;
}
catch (error) {
document.getElementById("demo").textContent =
error.message;
}
}
sendPerson();
Complete Example
This example sends form data to a server as JSON.
Example
<input id="name" value="John">
<input id="age" type="number" value="30">
<button onclick="sendPerson()">Send</button>
<p id="demo"></p>
<script>
async function sendPerson() {
const person = {
name: document.getElementById("name").value,
age: Number(document.getElementById("age").value)
};
try {
const response = await fetch("/api/person", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(person)
});
if (!response.ok) {
throw new Error("HTTP error " + response.status);
}
const result = await response.json();
document.getElementById("demo").textContent =
result.message;
}
catch (error) {
document.getElementById("demo").textContent =
error.message;
}
}
</script>
