So, I have tried to follow The Net Ninja tutorial for my website. Here is the tutorial link that I have followed. But I have to change some codes since their firebase version is old.
What I'm trying to do is to delete the row but this error came out:
Uncaught (in promise) TypeError: doc is not a function at HTMLButtonElement.<anonymous>
This is the javascript coding:
function renderList(doc){
let trow = document.createElement('tr');
let td1 = document.createElement('td');
let td2 = document.createElement('td');
let ControlDiv = document.createElement("div");
const date = doc.data().created.toDate().toDateString();
trow.setAttribute('data-id', doc.id);
td1.textContent = doc.data().email;
td2.textContent = date;
ControlDiv.innerHTML = '<button id="DelModBtn" type="button" class="btn btn-danger btn-primary my-2 ml-2">Delete</button>'
trow.appendChild(td1);
trow.appendChild(td2);
trow.appendChild(ControlDiv);
adminList.appendChild(trow);
//deleting the data
const deleteBtn = document.querySelector('#DelModBtn');
deleteBtn.addEventListener('click', async (e) => {
e.stopPropagation();
let id = e.target.parentElement.getAttribute('data-id');
await deleteDoc(doc(firestore, "admin", id));
})
}
Can someone tell me what is wrong?
It seems that "doc" is an object, so you can't call it as a function.
Here is an example of function and object method call :
function sayHelloTo(name) {
console.log('Hello to ' + name);
}
let helloTo = {
getMessage: function(params) {
return "Hello to ";
},
chris: function(params) {
console.log(this.getMessage() + 'chris');
},
bob: function(params) {
console.log(this.getMessage() + 'bob');
},
bruh: function(params) {
console.log(this.getMessage() + 'bruh');
},
}
sayHelloTo('YOU'); // here I call a function such as is wrong in your code : "doc(firestore, "admin", id)"
helloTo.chris(); // here I call object method such as "doc.data()"
helloTo.bob();
helloTo.bruh();I watched the video, the caster is using an object named "db" and he might get returned an other object after calling "db.collection('cafes')" so to explain, it could be something like this :
// I've created some example classes to match with your turorial video
let docClass = class Doc { // a class is a more complex object, that is used to create a lot of same object
// constructor is a native method that is call at creation = "new docClass(0,'data')"
// it will first execute code in "contructor" and then return "this", this is the current created object of the class
constructor(id,indata){
this.id = id;
this.indata = indata;
}
data(){
return this.indata;
}
delete(){
return 'i should delete something';
}
}
let collectionClass = class Collection { // it's a class too
constructor(name){
this.name = name;
this.docs = {};
}
doc(id){
return this.docs[id];
}
addDoc(doc){
this.docs[doc.id] = doc;
}
};
let dbClass = class DB { // it's a class too
constructor(name){
this.collections = [];
}
collection(collectionName) {
let index = this.collections.map(col=>col = col.name).indexOf(collectionName);
return this.collections[index];
}
addCollection(col){
this.collections.push(col);
}
}
// so here we create object from classes
let db = new dbClass('mydatabase');
let collection = new collectionClass('mycollection');
let docs_examples = [
new docClass(0,'data0'),
new docClass(1,'data1'),
new docClass(2,'data2'),
new docClass(3,'data3'),
];
// here we call addDoc method to add Docs in collection object
for (const doc of docs_examples) {
collection.addDoc(doc);
}
// and here we add collection to db object
db.addCollection(collection);
// here you can see some similar lines with your tutorial video, but now you can understand and read how it works
console.log(db.collection('mycollection'));
console.log(db.collection('mycollection').doc(2));
console.log(db.collection('mycollection').doc(2).delete());
console.log(db.collection('mycollection').doc(2).data());