Level 29
On which OS are you testing this ?
When you add a console log before the axios.get is called, does that console log show up in the browser dev tools?
Apr 29, 2024
5
Level 8
Axios GET only working in FIREFOX
axios.get(`/teacher/rooms/${id}`)
.then(function (response) {
// handle success
setRooms(response.data);
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
I have some GETs for a page where it has to load data on the fly depending on what the user selects. The problem is it only working in Firefox, and not in Edge or Chrome.
Update: I tried using fetch to no avail.
Level 8
@gych throwing the console.log in, there is no output on the exe of the function.
{
schools.map((school, index) => (
<option key={index} onClick={() => getBuildingsAndGroups(school.id)} value={school.id}>{school.name}</option>
))
}
function getBuildingsAndGroups(id) {
console.log('hello world');
fetch(`/teacher/buildings/${id}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// handle success
setBuildings(data);
console.log(data);
})
.catch(error => {
// handle error
console.error('Fetch Error:', error);
});
fetch(`/teacher/groups/${id}`)
.then(function (response) {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(function (data) {
// handle success
setGroups(data);
console.log(data);
})
.catch(function (error) {
// handle error
console.error('Fetch Error:', error);
});
}
Level 29
@Randy_Johnson Ok if the console log doesn't output when calling the function the issue is not related to the fetch.
Looking at your code you are using onClick on the options but you should use onChange on the select element.
Add onChange to the select element
<select onChange={(event) => getBuildingsAndGroups(event)}>
Remove the onClick from the options
schools.map((school, index) => (
<option key={index} value={school.id}>{school.name}</option>
))
Use method like this
function getBuildingsAndGroups(event) {
const id = event.target.value;
// rest of the code
Level 8
@gych Worked like a charm, thanks mate!
Level 29
@Randy_Johnson No problem :) I'm glad it works ! Please don't forget to close your thread by selecting the best answer.
1 like
Please or to participate in this conversation.