I was trying to write a class method to list out employee’s name from google Firestore. The class is then use in other pages.
- After using
getDocs()to get DocumentSnapShot of the collection, the documents are all push into an array. - The array is then called from the other web page
- The array shows empty, but after expanding the array there is objects inside
CustomFunction.ts
<code>class Employee {
private UserCollection = collection(db, "User")
array: object[] = []
public async getEmployees() {
try {
const UserDocuments = await getDocs(this.UserCollection)
UserDocuments.forEach((docs) => {
this.array.push(docs.data())
})
}
catch (error) {
console.log(`Error message: ${error}`)
}
console.log(this.array)
}
}
export const EmployeeList = Employee
</code>
<code>class Employee {
private UserCollection = collection(db, "User")
array: object[] = []
public async getEmployees() {
try {
const UserDocuments = await getDocs(this.UserCollection)
UserDocuments.forEach((docs) => {
this.array.push(docs.data())
})
}
catch (error) {
console.log(`Error message: ${error}`)
}
console.log(this.array)
}
}
export const EmployeeList = Employee
</code>
class Employee {
private UserCollection = collection(db, "User")
array: object[] = []
public async getEmployees() {
try {
const UserDocuments = await getDocs(this.UserCollection)
UserDocuments.forEach((docs) => {
this.array.push(docs.data())
})
}
catch (error) {
console.log(`Error message: ${error}`)
}
console.log(this.array)
}
}
export const EmployeeList = Employee
EmployeeList.vue
<code>const Employees = new EmployeeList()
let FetchUser = async () => { await Employees.getEmployees() }
FetchUser()
console.log(Employees.array)
</code>
<code>const Employees = new EmployeeList()
let FetchUser = async () => { await Employees.getEmployees() }
FetchUser()
console.log(Employees.array)
</code>
const Employees = new EmployeeList()
let FetchUser = async () => { await Employees.getEmployees() }
FetchUser()
console.log(Employees.array)
Log shows from EmployeeList.vue:
Log shows from CustomFunction.ts:
I tried indexing both arrays, array on EmployeeList.vue shows undefined while array on CustomFunctions.ts did give me the object I had indexed.
May I know why the array in EmployeeList.vue is empty?