I initially had a self invoking function to get habits from the database, loop through and display them on the web. I was trying to refactor that code to allow me to call it in the add habits function and pass new habit as a parameter. This was my reference but I get keep getting an error that displayHabits is not a function.
I see that. I'm not sure that it is necessary to wrap the function as self executing. displayHabits 1. doesn't take any arguments when you define it but you are giving it an argument when you attempt to use it later in the code. 2. displayHabits fires itself first then returns itself to displayHabits.
I would simplify and make two functions
let displayInitialHabits = async function () {
// axios call to get saved habits and then display them
//
}
// then when document is loaded
displayInitialHabits();
// and another function to add a new habit on form submit
let addHabit = async function (event) {
event.preventDefault();
// get form data and save as a new habit
// clear form inputs after save
// add new habit to the list
}
ok, after a quick review one thing did stand out. your async function addNewHabit does not return a promise. also, async functions should always return a promise. you can achieve that in one of two ways:
everything inside the function is wrapped with a Promise:
let myFunction = async function () {
return new Promise((resolve, reject) => {
// do function stuff and resolve(data) or reject(error) when done
});
}
if you are doing additional await stuff inside the async function you can return a fully resolved or rejected promise like so:
let myFunction = async function () {
let data
try {
data = await someOtherAsyncFunction();
} catch (error) {
return Promise.reject(error)
}
return Promise.resolve(data)
}
so in your code I would change "return newHabit" to "return Promise.resolve(newHabit)"
remember, async functions will always return a Promise
if you need any additional help or get stuck again feel free to hit me up. good luck!
I'd really appreciate that.
Here is the html and the javascript.
And this the javascript code before i started making changes.
I initially had a self invoking function to get habits from the database, loop through and display them on the web. I was trying to refactor that code to allow me to call it in the add habits function and pass new habit as a parameter. This was my reference but I get keep getting an error that displayHabits is not a function.
I see that. I'm not sure that it is necessary to wrap the function as self executing. displayHabits 1. doesn't take any arguments when you define it but you are giving it an argument when you attempt to use it later in the code. 2. displayHabits fires itself first then returns itself to displayHabits.
I would simplify and make two functions
let displayInitialHabits = async function () {
// axios call to get saved habits and then display them
//
}
// then when document is loaded
displayInitialHabits();
// and another function to add a new habit on form submit
let addHabit = async function (event) {
event.preventDefault();
// get form data and save as a new habit
// clear form inputs after save
// add new habit to the list
}
Okay, I see why i'm getting the error. I'll refactor the code to follow a similar format.
ok, after a quick review one thing did stand out. your async function addNewHabit does not return a promise. also, async functions should always return a promise. you can achieve that in one of two ways:
let myFunction = async function () {
return new Promise((resolve, reject) => {
// do function stuff and resolve(data) or reject(error) when done
});
}
let myFunction = async function () {
let data
try {
data = await someOtherAsyncFunction();
} catch (error) {
return Promise.reject(error)
}
return Promise.resolve(data)
}
so in your code I would change "return newHabit" to "return Promise.resolve(newHabit)"
remember, async functions will always return a Promise
if you need any additional help or get stuck again feel free to hit me up. good luck!
I'll make the changes and reach out if i get stuck. Thank you for taking your time to review the code. I'm grateful.