Retrieving data from the collection leads and displaying all documents in an HTML table. Upon clicking, I need to extract the document ID of the clicked item as it serves as the sole primary key.
P.S I am able to obtain records of all documents in an array format. However, I require the document ID to be included in this same array.
Below is the code snippet that I'm utilizing to retrieve the data. I am storing the information in the tableData array. I want the docID included within this array as well.
this.firestore.collection('leads' , ref => ref
.limit(5)
).snapshotChanges()
.subscribe(response => {
if(!response.length){
console.log("no data available");
return false;
}
this.firstInResponse = response[0].payload.doc;
this.lastInResponse = response[response.length - 1].payload.doc;
this.tableData = [];
for(let item of response){
this.tableData.push(item.payload.doc.data());
console.log(this.tableData);
}
...
Providing screenshots of console logs and Firestore for better understanding.
https://i.sstatic.net/2Mu93.png
Edit 1
After testing this approach
for(let item of response){
var data = item;
Object.assign(data, {id : item.payload.doc.id})
this.tableData.push(data);
console.log(this.tableData);
The actual structure of my array was disrupted, as illustrated in the screenshot below