Implementing the MVC design pattern in my application has been a bit challenging.
I am encountering an issue where the output of this.logActivities() in the Controller's constructor is showing up as undefined. Oddly enough, I can successfully run app.logActivities() from the console after the page loads.
Could this be happening because the data hasn't been fetched yet? If so, what steps can I take to resolve this?
class Model {
constructor() {
this.getActivities()
.then(json =>
this.activities = json.activities
)
}
async getActivities() {
const url = 'https://jsonplaceholder.typicode.com/todos/1'
const response = await fetch(url)
const json = await response.json()
return json
}
}
class View {
constructor() {}
}
class Controller {
constructor(model, view) {
this.model = model
this.view = view
this.logActivities()
}
logActivities() {
console.log(this.model.activities)
}
}
app = new Controller(new Model(), new View())