Refilling a form from a database

user_12576955 0
Viewed 40

I'm so stuck on this I might not even be able to formulate a sensible question, but here goes...

I have a gigantic (and occasionally changing) form. I've found a reasonable way to get all the data from the form, turn it into an object, and save it to Firebase all at once. It looks like this, and is working fine (I think): 

const incidentReport = document.getElementById('incident-report-form');
let irv = {};
// This works. All form data is saved to an object (as required by firebase), with the question as the name and the answer as the value.
incidentReport.addEventListener('submit', (e) => {
  e.preventDefault();
  [...incidentReport.elements].forEach((item) => {
    let name = item.name;
    let value = item.value;

    irv = { ...irv, [name]: value };
  });
  // After all data is collected in one object, I send it to the database all at once.
  db.collection('incident reports').add(irv);
});

Okay, so far so good... Now I want to get it back out of the database (I know how to do this) and repopulate the same form (no idea). I'm 100% stumped and I don't even know what to try.

Please forgive me if this is super easy and my brain is just shutting off... it's been a rough day. Thanks in advance.

EDIT - This seems to work? I'm still very open to criticism and/or improvements.

    // Get data from incident reports 
//@TODO -> Need to create a list of incident reports, and then load the one //the user clicks on. 
//Right now there is only one incident report in the database for testing.
    db.collection('incident reports')
      .get()
      .then((snap) => {
        snap.docs.forEach((element) => {
          data = element.data(); //Previously declared but not included in this snippet, sorry.
        });
        for (let [key, value] of Object.entries(data)) {
          let x = document.getElementsByName(key)[0];
          if (x !== undefined) {
            x.value = value;
          }
        }
      });
google-cloud-firestore firebase javascript
1 Answers

If I understood it correctly, once you returned the data from your Firestore collection, you want to print them back in your HTML form. Considering that, it should not be very hard for you to achieve that.

Once you load the documents into an array, you should be able to assign the values to variables, that will be printed in the form. It should be something like this:

//Getting the collection and a specific document
var report = db.collection('incident reports').doc('<report>');
var getDoc = report.get()
.then(doc => {
    if (!doc.exists) {
        console.log('No such document!');
    } else {
        // Loading the values of the document into variables
        var name = getDoc.data().name;
        var value = getDoc.data().value;
        ...
        // Other values loaded to other variables that you create
    }
})
.catch(err => {
    console.log('Error getting document', err);
});

Once you have loaded the values into variables, you just need to create a tag <script> that will be adding the values via Javascript into your HTML. Something that can look like this:

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    document.getElementById('<form item name>').innerHTML = name;
</script>

While this code is not tested, I believe it should be a good starting point for you, on what you need to do, to achieve your goal. It's only for one document, but since you are on tests right now and have only one document, you should be fine.

Besides that, you can find a good and full example on retrieving values from Firestore and priting in a page, in this other post here: How can I display all data from Firestore documents into html elements

Let me know if the information helped you!

user_127672570
Related