I'm facing an issue where duplicate elements are being displayed in an Angular table when receiving data from Node.js. The array sent by Node.js contains 2 elements, but somehow it appears as 4 elements in the Angular table. This discrepancy is puzzling as both consoles in Node and Angular show the correct array length. Here's a snippet of the console log:
Angular Component ts file method
onGetRequisitionToEdit(id){
this.requisitionService.getRequisition(id)
.subscribe(resData => {
console.log('resData.shortlist.length', resData.shortlist.length);
console.log('resData.shortlist', resData.shortlist);
// pls see screenshot of console
this.requisition = resData.requisition;
// more code
})
Angular Service method
getRequisition(id: string) {
return this.httpClient.get<{requisition: Requisition, interviews: Interview[], shortlist: Shortlist[], history: Syslog[]}>(this.reqUrl + '/get/' + id);
}
Node controller method
exports.getRequisition = (req, res, next) => {
requisitionService.getRequisition(req.params.id)
.then(resData => {
res.status(200).json(resData);
})
.catch(err => {
res.status(500).json({
message: "Server Error in fetching requisitions: " + err
});
});
}
Node Controller Service
async function getRequisition(id){
const requisition = await Requisition.findById(id);
if(!requisition) {
throw 'Requisition not found';
}
let interviews;
interviews = await Interview.find({reqnId: id}).collation({ locale: 'en'});
if(!interviews) interviews = [];
let shortlist;
shortlist = await Shortlist.find({reqnId: id}).collation({ locale: 'en'});
if(!shortlist) shortlist = [];
console.log('shortlist', shortlist);
///////////// output: 2 elements
let history;
history = await Syslog.find({reqnId: id}).collation({ locale: 'en'});
if(!history) history = [];
const resData = {
requisition: requisition,
interviews: interviews,
shortlist: shortlist,
history: history
}
return resData;
}
Please assist me in identifying where I might be making a mistake.