How to check if the response of a fetch is a json object in javascript

JavascriptJsonFetch Api

Javascript Problem Overview


I'm using fetch polyfill to retrieve a JSON or text from a URL, I want to know how can I check if the response is a JSON object or is it only text

fetch(URL, options).then(response => {
   // how to check if response has a body of type json?
   if (response.isJson()) return response.json();
});

Javascript Solutions


Solution 1 - Javascript

You could check for the content-type of the response, as shown in this MDN example:

fetch(myRequest).then(response => {
  const contentType = response.headers.get("content-type");
  if (contentType && contentType.indexOf("application/json") !== -1) {
    return response.json().then(data => {
      // The response was a JSON object
      // Process your data as a JavaScript object
    });
  } else {
    return response.text().then(text => {
      // The response wasn't a JSON object
      // Process your text as a String
    });
  }
});

If you need to be absolutely sure that the content is a valid JSON (and don't trust the headers), you could always just accept the response as text and parse it yourself:

fetch(myRequest)
  .then(response => response.text()) // Parse the response as text
  .then(text => {
    try {
      const data = JSON.parse(text); // Try to parse the response as JSON
      // The response was a JSON object
      // Do your JSON handling here
    } catch(err) {
      // The response wasn't a JSON object
      // Do your text handling here
    }
  });

Async/await

If you're using async/await, you could write it in a more linear fashion:

async function myFetch(myRequest) {
  try {
    const reponse = await fetch(myRequest);
    const text = await response.text(); // Parse it as text
    const data = JSON.parse(text); // Try to parse it as JSON
    // The response was a JSON object
    // Do your JSON handling here
  } catch(err) {
    // The response wasn't a JSON object
    // Do your text handling here
  }
}

Solution 2 - Javascript

You can do this cleanly with a helper function:

const parseJson = async response => {
  const text = await response.text()
  try{
    const json = JSON.parse(text)
    return json
  } catch(err) {
    throw new Error("Did not receive JSON, instead received: " + text)
  }
}

And then use it like this:

fetch(URL, options)
.then(parseJson)
.then(result => {
    console.log("My json: ", result)
})

This will throw an error so you can catch it if you want.

Solution 3 - Javascript

Use a JSON parser like JSON.parse:

function IsJsonString(str) {
    try {
        var obj = JSON.parse(str);

         // More strict checking     
         // if (obj && typeof obj === "object") {
         //    return true;
         // }

    } catch (e) {
        return false;
    }
    return true;
}

Solution 4 - Javascript

I recently published an npm package that includes common utility functions. one of these functions that I implemented there is just like the nis's async/await answer that you can use as bellow:

import {fetchJsonRes, combineURLs} from "onstage-js-utilities";

fetch(combineURLs(HOST, "users"))
    .then(fetchJsonRes)
    .then(json => {
        // json data
    })
    .catch(err => {
        // when the data is not json
    })

you can find the source on Github

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSibelius SeraphiniView Question on Stackoverflow
Solution 1 - JavascriptnilsView Answer on Stackoverflow
Solution 2 - JavascriptlarskarboView Answer on Stackoverflow
Solution 3 - JavascriptRakesh SoniView Answer on Stackoverflow
Solution 4 - JavascriptHeartbitView Answer on Stackoverflow