Fetching JSON with JavaScript Fetch API

To fetch JSON from the server using the Fetch API, you need to use the JavaScript fetch() method and then call the response.json() method to get the JSON data as a JavaScript object. The response.json() method reads the data returned by the server and returns a Promise that resolves with a JSON object. If you are expecting a text, call the response.text() method. For some servers, you must also send the "Accept: application/json" header to get the response in JSON format. In this JavaScript Fetch JSON example, we retrieve a JSON from the ReqBin echo URL using the fetch() method. Click Execute to run the JavaScript Fetch JSON Example online and see the result.
Fetching JSON with JavaScript Fetch API Execute 
fetch('https://reqbin.com/echo/get/json', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
    },
})
   .then(response => response.json())
   .then(response => console.log(JSON.stringify(response)))
Updated: Viewed: 19432 times

What is JSON?

JavaScript Object Notation (JSON) is a language-independent text format for storing and exchanging data. Web applications use JSON to exchange data between a web browser and a server and exchange data between servers via REST API. For many programming languages, including JavaScript, Java, C ++, C #, Go, PHP, and Python, there are ready-made code libraries for creating and manipulating JSON data. JSON file names use the .json file extension.

JSON Example
{
  "Id": 78912,
  "Customer": "Jason Sweet",
  "Quantity": 1,
  "Price": 18.00
}

What is Fetch API?

The Fetch API presents a new global fetch() method, which allows network requests to be made similarly to the XMLHttpRequest (XHR) method but more powerfully and flexibly. Fetch API is a better alternative to XMLHttpRequest and can be easily integrated with other technologies, such as Service Workers. The main difference between the Fetch API and XMLHttpRequest is that Fetch uses promises, which allows you to have a more straightforward and cleaner API without nested callbacks.

JavaScript Fetch JSON Example

Below are example of getting JSON from the ReqBin echo URL using Fetch API.

JavaScript Fetch JSON Example
fetch('https://reqbin.com/echo/get/json')
   .then(response => response.text())
   .then(text => console.log(text))
  
// output: {"success":"true"}

The response.text() method does not automatically parse the response body and resolves to a string. To automatically parse a JSON response into a JavaScript object, you need to use the response.json() method.

How to fetch JSON data in JavaScript?

To get JSON data from an API endpoint, you must first call the fetch() method and then response.json(). The fetch() method returns a Promise representing the server's response, and the response.json() resolves to the result of parsing the JSON response into a JavaScript object.

JavaScript Fetch JSON Data with Fetch API Example
fetch('https://reqbin.com/echo/get/json')
   .then(response => response.json())
   .then(json => console.log(JSON.stringify(json)))
  
// output: {"success":"true"}

How to POST JSON data using Fetch API?

To post JSON data to the server using the Fetch API, you need to tell fetch() to use the POST method and pass the JSON data in the "body" parameter. The Content-Type: 'application/json' HTTP header is necessary for the server to correctly receive and interpret the JSON data in the body of the HTTP message.

JavaScript POST JSON with Fetch API Example
fetch('https://reqbin.com/echo/post/json', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({"id": 1})
})
   .then(response => console.log(response.status))
  
// output: 200

How to fetch JSON data using HTTP POST method?

To fetch JSON data from the server using the HTTP POST method, you need to tell fetch() to make a POST request by passing the "method: 'POST'".

JavaScript Fetch JSON with HTTP POST Example
fetch('https://reqbin.com/echo/post/json', {
    method: 'POST'
})
   .then(response => response.json())
   .then(json => console.log(JSON.stringify(json)))
  
// output: {"success":"true"}

How to fetch JSON using JavaScript async and await operators?

To fetch JSON data using JavaScript's async and await operators, you must first call await fetch() to resolve it to a Response object and then call await response.json() to resolve it to a parsed JSON object.

JavaScript Fetch JSON using async and await
const response = await fetch('https://reqbin.com/echo/get/json');

const json = await response.json();

console.log(JSON.stringify(json));
  
// output: {"success":"true"}

See also

JavaScript Fetch JSON Related API examples and articles