How to fetch items one by one from firebase database?-CodePudding

How can I add only one element to the page that I have added? Now, every time I add a bank, the entire database is pulled out and those banks that have already been added are drawn again.

const sendBankData = () => {
  set(ref(database, "banks/"   bankName.value), {
    bankName: bankName.value,
    interestRate: interestRate.value,
    maximumLoan: maximumLoan.value,
    minimumDownPayment: minimumDownPayment.value,
    loanTerm: loanTerm.value,
  })
    .then(() => {
      successfulPopUp();
    })
    .catch((error) => {
      // errorPopUp();
    });
};

const getBanksFunc = () => {
  const bankRef = ref(database, "banks/");
  onValue(bankRef, (snapshot) => {
    const data = snapshot.val();
    displayBanks(data);
  });
};

CodePudding user response：

Haven't used Firebase in a long time but if I remember correctly you'd pass the ID of the bank into the ref (const bankRef = ref(database, "banks/ID-OF-THE-BANK");

or you could sort and limit by create date.

CodePudding user response：

As commented above mentioned. You need to pass the ID to get the document you just inserted.

So for that you have two options:

One is to set a custom document Id and get the id you just inserted. Or get the doc id with the reference:

const sendBankData = () => {
  set(ref(database, "banks/"   bankName.value), {
    bankName: bankName.value,
    interestRate: interestRate.value,
    maximumLoan: maximumLoan.value,
    minimumDownPayment: minimumDownPayment.value,
    loanTerm: loanTerm.value,
  })
    .then(docRef => {
      console.log("Document written with ID: ", docRef.id); // Right here you have the if in the of the document you're looking for.

      successfulPopUp();
      // Then you can do the call to get the document:
      const bankRef = ref(database, "banks/${docRef.id}");
           onValue(bankRef, (snapshot) => {
             const data = snapshot.val();
             displayBanks(data);
       });

    })
    .catch((error) => {
      // errorPopUp();
    });
};