JavaScript Loading JSON
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.
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.
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();
Try it Yourself »
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}
]
Try it Yourself »
Example
async function loadProducts() {
const response = await fetch("products.json");
const products = await response.json();
myDisplayer(products[0].name);
myDisplayer(products[0].price);
}
loadProducts();
Try it Yourself »
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.
| 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"
}
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>
