I need it to be displayed on the screen after adding a bank to the database. Now the problem is that after adding a bank to the database, all banks from the database are displayed, and even those that have already been added - they are drawn again. How can I draw on the screen one bank that I have added?
// add bank
function sendBankData() {
db.collection("banks").add({
bankName: bankName.value,
interestRate: interestRate.value,
maximumLoan: maximumLoan.value,
minimumDownPayment: minimumDownPayment.value,
loanTerm: loanTerm.value,
});
successfulPopUp();
}
// get bank
function getBanks() {
db.collection("banks").onSnapshot((snapshot) => {
let banks = [];
snapshot.docs.forEach((doc) => {
banks.push({
id: doc.id,
...doc.data(),
});
});
generateBanks(banks);
});
}
function generateBanks(banks) {
banks.forEach((bank) => {
bankItems.innerHTML +=
`<div class="bank-item">
<img src="./img/edit-icon1.png" alt="">
<div class="bank-text">
Bank name: <span class="bank-name">` +
bank.bankName +
`</span>
</div>
<div class="bank-text">
Interest rate: <span class="bank-interest-rate">` +
bank.interestRate +
`</span>
</div>
<div class="bank-text">
Maximum loan: <span class="bank-maximum-loan">` +
bank.loanTerm +
`</span>
</div>
<div class="bank-text">
Minimum down payment: <span class="bank-minimum-down-payment">` +
bank.maximumLoan +
`</span>
</div>
<div class="bank-text">
Loan term: <span class="bank-loan-term">` +
bank.minimumDownPayment +
`</span>
</div>
</div>
`;
});
}You can listen on document changes and then rerender your banks:
function getBanks() {
db.collection("banks").onSnapshot((snapshot) => {
const banks = [];
if (banks.length === 0) {
// Your first loop for existing banks
snapshot.docs.forEach((doc) => {
banks.push({
id: doc.id,
...doc.data(),
});
});
generateBanks(banks);
}
// Now you can listen for changes
snapshot.docChanges().forEach((change) => {
const bank = {
id: change.doc.id,
...change.doc.data(),
};
// Here you can add your new bank and rerender
if (change.type === "added") {
console.log("Added bank: ", bank);
banks.push(bank );
generateBanks([bank ]);
}
// You can also react on modified and removed objects
if (change.type === "modified") {
console.log("Modified bank: ", bank );
}
if (change.type === "removed") {
console.log("Removed bank: ", bank );
}
});
});
}
For further reading check the docs.