[FIXED] How to get data from Bootstrap input field

Issue

I'm new to Bootstrap. I would like to populate my Bootstrap table with data from my Firestore. The data is loaded and fetched correctly (It's logged into my console) but I can't seem to figure out how to add it into the table. The goal is to have a table with 2 columns: Category(string) and Amount(integer). This is my firestore collection: Firestore collection

And here is my code for extracting data:

getDocs(colRef).then((snapshot) => {
            let expense = []
                snapshot.docs.forEach((doc) => {
                  expense.push({
                    ...doc.data(), id: doc.id
                  }) 
                  console.log("expense, ",expense);
                });
       
        var myTable = document.getElementById('table_body');
        var content = '';
        let html = `<tr>
            <td>${expense.category}</td>
            <td>${expense.amount}</td>
        </tr>`;
        content += html;
        myTable.innerHTML = content;
    })

Solution

how about this:

getDocs(colRef).then((snapshot) => {
            snapshot.forEach(doc=>{
                var data = doc.data();
                console.log(data.amount)
                var row = `<tr>
                    <td>${data.amount}</td>
                    <td>${data.category}</td>
                </tr>`;
           
       
        let myTable = document.getElementById('table_body');
        myTable.innerHTML += row
    })
    })
    .catch(error=> {
        console.log(`Error ${error}`)
    })

Answered By - Sara

Answer Checked By - David Goodson (PHPFixing Volunteer)