Response.json is not a function

Question

I need your help. I'm trying to learn how to execute a POST query to create a new object in a database using fetch. I use pure javascript. However, I get an error that looks like this:

Mistake TypeError: response.json is not a function at sendData (scrip4t.js:22) at HTMLButtonElement.onclick

What am I doing wrong? Thanks

HTML

<input type="text" id="name">
<input type="text" id="price">
<input type="text" id="description">
<button id="send" onclick="sendData()">submit</button>

JS

const url = `http://localhost:8081/laptop`
let name = document.getElementById('name')
let price = document.getElementById('price')
let description = document.getElementById('description')

function sendData () {

let name_of_laptop = name.value
let price_of_laptop = price.value
let laptop_description = description.value

let data = {name: name_of_laptop, price: price_of_laptop, description: laptop_description}

try {
    const response = fetch(url, {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
            'Content-Type' : 'application/json'
        }
    });
    let json = response.json();
    console.log('Success', JSON.stringify(json))
} catch (error) {
    console.error('Mistake',error)
 }
}

[`json`](//developer.mozilla.org/docs/Web/API/Response/json) is a method on response `Body` objects, not on [`Promise`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise) objects. Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Dec 07 '21 at 10:08
See the examples [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/fetch) (and elsewhere). What you're calling `response` is not the response, it's a *promise* of a response. — T.J. Crowder, Dec 07 '21 at 10:09
To put what Sebastian said in more direct terms, write `async function sendData () { ...` and `const response = await fetch(url, { ...` — Patrick Roberts, Dec 07 '21 at 10:09

score 0 · Accepted Answer · answered Dec 07 '21 at 10:13

You need to prefix them with await. Check here to understand async/await

...

async function sendData () {

...

try {
    const response = await fetch(url, {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
            'Content-Type' : 'application/json'
        }
    });

    let json = await response.json();
    console.log('Success', JSON.stringify(json))
} catch (error) {
    console.error('Mistake',error)
 }
}

score 0 · Answer 2 · answered Dec 07 '21 at 10:17

You need to use promise chain or async/await like below code:

fetch(url, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Content-Type' : 'application/json'
    })
.then(response => response.json())
.then(data=> console.log(data));

or

async function sendData () 
 const response = await fetch(url, {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Content-Type' : 'application/json'
    }
 });

 let data = await response.json();
 console.log(data);
}

Response.json is not a function

2 Answers2