Skip to content

How can I display all data from Firestore documents into an html table

I am designing a web page that will obtain data from my firestore collection and display each document with its corresponding fields Here is the code:

<table class="table is-striped is-narrow is-hoverable is-fullwidth">
            <th>AR Level</th>
        <tbody id="myTable">

here is the JS:

db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
            dataObj =
            function buildTable(data){
                var table = document.getElementById('myTable')
                for (var i = 0; i < data.length; i++){
                    var row = `<tr>
                    table.innerHTML += row


I don’t see why you’re using a for loop in your function. Unless one “Book” document is an Array of items each having the Title/Author/Points fields.

You’re basically looping through the data object as if it’s an array. Chances are, it’s not.

If I’m right, and one “Book” document is object/map containing those three fields, then your code should be like this:

db.collection("books").where("ItemType", "==", "Book").where("Program", "==", "AR")
            let data =;
            let row  = `<tr>
            let table = document.getElementById('myTable')
            table.innerHTML += row
        console.log(`Error: ${err}`)