How to check if the response of a fetch is a json object in 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.
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
}
}