Fetch doc.id in response along with data from a collection

Question

Fetching data from collection leads and showing all documents on Html table. On click, I need to fetch the doc.id of clicked item as it is the only primary key.

P.S I am getting records of all documents in array. I need the document id too in this same array.

Below is the code I am using to fetch the data. I am pushing in tableData array. I want docid in this array.

 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);
}

...

Attaching screenshots of console.log and Firestore for clarity.

Edit 1

After trying this

for(let item of response){
  var data = item;
  Object.assign(data, {id : item.payload.doc.id})
  this.tableData.push(data);
  console.log(this.tableData);

My actual array broke, below is the screenshot

Milan Lakhani Milan Lakhani · Accepted Answer · 2020-04-02T05:58:14

Try this,

for(let item of response){
 var data = Object.assign(item.payload.doc.data(), {id : item.payload.doc.id})
 this.tableData.push(data);
 console.log(this.tableData);
}

I got the id from item.payload.doc.id and then added id property to the data Object and then pushed the modified object to tableData

Hope this helps!!

Fetch doc.id in response along with data from a collection

Edit 1

1 Answers