I'm practicing using the fetch API for a project I'm working on and having trouble getting a button to call a function that uses the fetch API to access an external API. Keep getting a 'Type Error: Failed to Fetch' message.
const uri = '';
const initDetails = {
method: 'get',
headers: {
"Content-Type": "application/json; charset=utf-8"
},
mode: "cors"
}
function getData() {
fetch(uri, initDetails)
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
console.log(response.headers.get("Content-Type"));
return response.json();
}
)
.then(myJson => {
console.log(JSON.stringify(myJson));
})
.catch(err => {
console.log('Fetch Error :-S', err);
});
}
window.onload=function() {
let myButton = document.getElementById("getData");
myButton.addEventListener('click', getData);
}<form>
<button id='getData'>Get Data</button>
</form>I'm practicing using the fetch API for a project I'm working on and having trouble getting a button to call a function that uses the fetch API to access an external API. Keep getting a 'Type Error: Failed to Fetch' message.
const uri = 'https://jsonplaceholder.typicode./posts';
const initDetails = {
method: 'get',
headers: {
"Content-Type": "application/json; charset=utf-8"
},
mode: "cors"
}
function getData() {
fetch(uri, initDetails)
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
console.log(response.headers.get("Content-Type"));
return response.json();
}
)
.then(myJson => {
console.log(JSON.stringify(myJson));
})
.catch(err => {
console.log('Fetch Error :-S', err);
});
}
window.onload=function() {
let myButton = document.getElementById("getData");
myButton.addEventListener('click', getData);
}<form>
<button id='getData'>Get Data</button>
</form>3 Answers
Reset to default 3Your button is inside a form. The default action of buttons inside forms is to submit the form, which reloads the page and aborts the fetch request.
Either preventDefault() in the form submit handler, add type="button" to the <button> element, or (ideally, in this case) remove the <form> entirely.
Try this one its working for me.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
const uri = 'https://jsonplaceholder.typicode./posts';
const initDetails = {
method: 'get',
headers: {
"Content-Type": "application/json; charset=utf-8"
},
mode: "cors"
}
function GetData() {
fetch( uri, initDetails )
.then( response =>
{
if ( response.status !== 200 )
{
console.log( 'Looks like there was a problem. Status Code: ' +
response.status );
return;
}
console.log( response.headers.get( "Content-Type" ) );
return response.json();
}
)
.then( myJson =>
{
console.log( JSON.stringify( myJson ) );
} )
.catch( err =>
{
console.log( 'Fetch Error :-S', err );
} );
}
</script>
<button id='getData' onclick="GetData()">Get Data</button>
</body>
</html>
I had the same problem after adding a "<form>" section in an HTML page where I had Ajax calls with fetch() from "<button>":
There is a problem when putting a <form> tag and using a fetch() with values not ing from the "form" from a "<button>" tag ...
The solution is then to put the button via a tag "<input type ="button"...>
<input type="button" id='getData' onclick="GetData()" value="Get Data">