TypeError: response.json is not a function in JavaScript

# Table of Contents

1. TypeError: response.json is not a function in JavaScript
2. JavaScript fetch: Failed to execute 'json' on 'Response'

If you got the error "fetch: Failed to execute 'json' on 'Response'", click on the second subheading.

# TypeError: response.json is not a function in JavaScript

The "response.json is not a function" error occurs when:

• We call the json() method on an object that is not the Response object that resolves from the promise the fetch() method returns.
• We call the json() method on the return value of calling an axios method.

# Call the json() method on a valid Response object

To solve the error, make sure to only call the json() method on the Response object that resolves from a valid call to the fetch() method.

Copied!
async function getUser() {
  try {
    const response = await fetch('https://randomuser.me/api/');

    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    // ✅ call response.json() here
    const result = await response.json();
    return result;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser())

The code sample shows a complete example of using the fetch() method to make a call to a remote API.

And here is an example of calling the response.json() method if you use the .then() syntax.

Copied!
function getUser() {
  return (
    fetch('https://randomuser.me/api/')
      // ✅ call response.json() here
      .then(response => response.json())
      .then(data => {
        console.log(data);
      })
      .catch(err => {
        console.log(err);
      })
  );
}

getUser();

The fetch() method returns a Promise that resolves to a Response object.

The Response object contains the json() method that returns a promise that resolves to a JavaScript object.

The json() method parses the JSON from the response to a native JavaScript object.

# Solve the error when using axios

If you use axios, you don't have to call the json() method on the response.

Copied!
import axios from 'axios';

async function getUser() {
  try {
    const response = await axios.get('https://randomuser.me/api/', {
      headers: {'Accept-Encoding': 'gzip,deflate,compress'},
    });

    return response.data;
  } catch (err) {
    console.log(err);
  }
}

console.log(await getUser());

Axios takes care of parsing the response automatically, so we don't have to call any additional methods.

Access the data property on the object to get the data from the response.

The data property contains the response that was sent from the server.

Here is an example that uses the .then() syntax instead of async/await.

Copied!
import axios from 'axios';

async function getUser() {
  return axios
    .get('https://randomuser.me/api/', {
      headers: {'Accept-Encoding': 'gzip,deflate,compress'},
    })
    .then(response => {
      console.log(response.data);
    })
    .catch(err => {
      console.log(err);
    });
}

await getUser();

Other properties on the axios response object include:

• status - the status code of the server response
• statusText - the HTTP status message of the response, e.g. OK
• headers - the HTTP headers the server responded with
• config - the config that was provided to axios for the request
• request - the request that generated this response

# JavaScript fetch: Failed to execute 'json' on 'Response'

The JavaScript fetch error "Failed to execute 'json' on 'Response': body stream already read" occurs when the response.json() method is called multiple times.

To solve the error, make sure to only consume the fetch response once.

Here is an example of how the error occurs.

Copied!
function makeRequest() {
  return fetch('https://randomuser.me/api/').then(response => {
    console.log(response.json());

    // ⛔️ Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': body stream already read
    return response.json();
  });
}

makeRequest();

Notice that we called the reponse.json method twice.

We first called the method in the call to console.log and then called the method in the return statement.

The response.json method takes a Response stream and reads it to completion.

As the error message states: "body stream already read".

To resolve the error, make sure to only call the response.json() method once.

# Chaining an additional .then() call to log the data

One way to solve the error is to return the call to response.json() and chain an additional .then() call.

Copied!
function makeRequest() {
  return fetch('https://randomuser.me/api/')
    .then(response => {
      return response.json();
    })
    .then(result => {
      console.log(result);
    });
}

makeRequest();

The .json() method returns a Promise that resolves to a JavaScript object, so we can safely chain a .then() call on the return value of the method.

Here is an example that uses the async/await syntax.

Copied!
async function makeRequest() {
  const response = await fetch('https://randomuser.me/api/');

  const responseJSON = await response.json();

  console.log(responseJSON);

  return responseJSON;
}

makeRequest();

The async/await syntax is a bit more concise and intuitive.

We call the response.json() method and store the result in a variable.

We can then safely console.log() the variable without having to call the response.json method a second time.

# Using the clone() method to solve the error

If the error persists, use the clone() method to create a clone of the response object before calling json().

Copied!
function makeRequest() {
  return fetch('https://randomuser.me/api/')
    .then(response => {
      return response.clone().json();
    })
    .then(result => {
      console.log(result);
    });
}

makeRequest();

If, for some reason, you have to call the .json() method on the response multiple times, use the clone() method to clone it each time.

Copied!
function makeRequest() {
  return fetch('https://randomuser.me/api/')
    .then(response => {
      // 👇️ calling clone() here
      console.log(response.clone().json());

      // 👇️ calling clone() here as well
      return response.clone().json();
    })
    .then(result => {
      console.log(result);
    });
}

makeRequest();

The code sample doesn't raise an error because we used the clone() method before calling json() each time.

Here is an example that uses the async/await syntax with clone().

Copied!
async function makeRequest() {
  const response = await fetch('https://randomuser.me/api/');

  const responseJSON = await response.clone().json();

  console.log(responseJSON);

  return responseJSON;
}

makeRequest();

Note that the clone() method throws a TypeError if the response body has already been used.

For example, running the following code sample causes an error.

Copied!
async function makeRequest() {
  const response = await fetch('https://randomuser.me/api/');

  // 👇️ this reads the stream
  console.log(response.json());

  // ⛔️ Uncaught (in promise) TypeError: Failed to execute 'clone' on 'Response': Response body is already used
  const responseJSON = await response.clone().json();

  console.log(responseJSON);

  return responseJSON;
}

makeRequest();

The purpose of the clone() method is to enable you to call the json() method multiple times, however, you have to use the clone() method to clone the response object each time.

If you get the TypeError: Failed to fetch and CORS error, click on the link and follow the instructions.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• ReferenceError: fetch is not defined in NodeJs
• Fetch API cannot load localhost. URL scheme is not supported
• Get the Status Code of a Fetch HTTP Response in JavaScript
• How to Make HTTP requests in TypeScript