Skip to main content

How to Resolve "TypeError: response.json is not a function" Error in JavaScript

The TypeError: response.json is not a function is a common error in asynchronous JavaScript that occurs when you try to call the .json() method on an object that is not a fetch API Response object. This most frequently happens when you are using the axios library and mistakenly try to handle the response as if it were from the native fetch API.

This guide will explain the fundamental difference between handling responses from fetch and axios, which is the root cause of this error, and show you the correct way to get JSON data from both.

The Core Problem: .json() Belongs to the fetch Response​

It's crucial to understand that .json() is a method that exists exclusively on the Response object provided by the browser's native fetch() API.

The purpose of response.json() is to:

  1. Read the response body stream to completion.
  2. Parse the body text as JSON.
  3. Return a new promise that resolves with the resulting JavaScript object.

This method does not exist on plain JavaScript objects or on the response objects returned by other libraries like axios.

Cause 1 (Most Common): You are Using axios​

This is the most frequent source of the error. Developers familiar with fetch often switch to axios and forget that axios handles JSON parsing differently.

Problem: axios automatically parses the JSON response for you and places the resulting data in the data property of its response object. Trying to call .json() on the axios response will fail because the data has already been parsed.

import axios from 'axios';

// PROBLEM: Trying to call .json() on an axios response.
axios.get('https://api.example.com/data')
  .then(response => {
    // `response` is an axios response object, not a fetch Response.
    // It has no .json() method.
    return response.json(); // This line throws the error.
  })
  .then(data => {
    console.log(data);
  });

Error Output:

Uncaught TypeError: response.json is not a function

Solution: when using axios, you should access the parsed JSON data directly from the response.data property.

import axios from 'axios';

// Correct: Access the `data` property.
axios.get('https://api.example.com/data')
  .then(response => {
    // The parsed JSON data is in `response.data`.
    const data = response.data;
    console.log(data);
  });

Cause 2: You are Incorrectly Handling a fetch Response​

While less common, this error can also occur if you are using fetch but have already parsed the response and are trying to do it a second time.

Example of problem:

async function getData() {
  const response = await fetch('https://api.example.com/data');
  
  // The response is correctly parsed here.
  const data = await response.json();
  
  // PROBLEM: `data` is now a plain JavaScript object. It does not have a .json() method.
  // This might happen if you pass `data` to another function that expects a `Response` object.
  const moreData = data.json(); // This line throws the error.
}

Solution: ensure you only call .json() once, directly on the Response object returned by the initial fetch call.

Side-by-Side Comparison: fetch vs. axios​

Seeing the correct patterns side-by-side makes the difference clear.

Correct fetch Usage​

fetch requires a two-step process: first get the Response, then parse its body.

With async/await:

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json(); // Step 2: Parse JSON
  console.log(data);
}

With .then():

fetch('https://api.example.com/data')
  .then(response => response.json()) // Step 2: Parse JSON
  .then(data => {
    console.log(data);
  });

Correct axios Usage​

axios handles both steps in one go. The parsed data is ready in response.data.

With async/await:

async function fetchDataWithAxios() {
  const response = await axios.get('https://api.example.com/data');
  const data = response.data; // Data is already parsed
  console.log(data);
}

With .then():

axios.get('https://api.example.com/data')
  .then(response => {
    const data = response.data; // Data is already parsed
    console.log(data);
  });

Conclusion​

The TypeError: response.json is not a function is a clear signal that you are not working with the object you think you are.

  • The .json() method belongs exclusively to the Response object from the native fetch() API.
  • If you are using axios, the JSON is automatically parsed for you. The resulting data is available in the response.data property.

By understanding this key difference, you can easily resolve this common error and correctly handle HTTP responses in your application.

Table of Contents