After developing a simple app on Vue, I wanted to add functionality by connecting it to an online database. With limited backend knowledge, I decided to give Firebase a try for its simplicity and speed.
The issue arises when I attempt to retrieve data from the database using Firestore:
firestore () {
return {
items: db.collection('items')
}
}However, when I fetch the data, my original array 'items' in the component's 'data()' method gets filled with entire objects from the collection. I only want specific fields like the 'name' field of each to-do item, not the complete object itself. Unfortunately, there seems to be no direct way to access individual fields like 'db.collection('items').name'.
To address this, I considered creating a function to extract the necessary data into an array before passing it to 'items':
function cleanRawData(objectToClean){
var cleanedArr = [];
for(let i=0; i<objectToClean.length; i++){
cleanedArr.push(objectToClean[i].name)
}
return cleanedArr
}
data () {
return {
items: [],
}
},
firestore () {
let itemObject = db.collection('items');
return {
items: cleanRawData(itemObject)
}
}Although unsure if my approach contains errors, the main goal is to filter the data retrieved from Firestore.
The challenge lies in testing the function as 'console.log(db.collection('items'))' does not provide an array of objects but rather a "Firestore Collection". Strangely enough, the app renders the data seamlessly as if it were a regular array.