CODEWITHSUNDEEP
angularjsgoogle-cloud-firestore
Antonio Ooi
Antonio Ooi

Reputation: 1828

Firestore: How to include doc.id in doc.data() while mapping?

I want to bind my data to the below HTML table:

<table id="tableAccounts">
        <thead>
            <tr>
                <th>No.</th>
                <th>Status</th>
                <th>Code</th>
                <th>Name</th>
                <th>Deposit / Credit Limit</th>
                <th>Date Joined</th>
                <th>Total Course</th>
                <th>UPV Cost</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="account in accounts">
                <td>{{ $index + 1 }}</td>
                <td>{{ account.AccStatus }}</td>
                <td>{{ account.id }}</td>
                <td>{{ account.AccName }}</td>
                <td>{{ account.Deposit }}</td>
                <td>{{ account.DateJoined }}</td>
                <td>{{ account.TotalCourse }}</td>
                <td>{{ account.UpvCost }}</td>
            </tr>
        </tbody>
    </table>

So I have the following code in my AngularJS controller:

var db = firebase.firestore();

        db.collection("Accounts").get().then((querySnapshot) => {
            if (!querySnapshot.empty) {
                $scope.accounts = querySnapshot.docs.map(doc => doc.data());
                $scope.$apply();
            }
        });

But the above code doesn't include the doc.id in doc.data() while performing mapping. How can I include the doc.id in this scenario so that it can bind to the Code column of my HTML table?

Upvotes: 2

Views: 1584

Answers (2)

Ghazaleh H
Ghazaleh H

Reputation: 11

This should work, using the spread operator, whose behavior is similar to Object.assign(), except that it doesn't trigger setters, nor mutate any object:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

querySnapshot.docs.map(doc => ({...doc.data(), id:doc.id}))

Upvotes: 1

Constantin Beer
Constantin Beer

Reputation: 5835

To get the doc.id you have to use snapshotChanges() in your code like this:

db.collection("Accounts").snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;
    return { id, ...data };
  });
});

Upvotes: 0

Related Questions