I am encountering a challenge with binding requested API data to a variable in my component.
Firstly, here is my server-side method (using Express and Mongoose).
app.post('/api/rolloutMeeting', async (req, res)=> {
var singleMeetingID = req.body
singleMeetingID = singleMeetingID.singleMeetingID
var meeting = []
meeting[0] = await Meeting.findOne({_id: singleMeetingID})
companyID = meeting[0].compID.compID
meeting[1] = []
for(var i = 0; i < meeting[0].projectIDs.length+1; i++) {
meeting[1][i] = await Project.findOne({_id: meeting[0].projectIDs[i]})
}
meeting[2] = []
for(var j = 0; j < meeting[1][j].taskIDs.length; j++) {
for(var k = 0; k < meeting[1][j].taskIDs.length; k++) {
meeting[2][j] = await Content.findOne({_id: meeting[1][j].taskIDs[j]})
}
}
console.log(meeting)
res.json(meeting)
})
The output is exactly as desired and working fine.
This is my Service Method that requests the data from the API.
rolloutMeeting(singleMeetingID) {
return this.http.post('/api/rolloutMeeting', {
singleMeetingID
})
}
Lastly, my component where the mistake might be hiding:
import { Component, OnInit, Input } from '@angular/core';
import { MeetingService } from '../../meeting.service';
import { ProjectService } from '../../project.service';
import { ContentService } from '../../content.service'
import { meeting } from '../../meeting'
import { project } from '../../project';
@Component({
selector: 'app-singlemeeting',
templateUrl: './singlemeeting.component.html',
styleUrls: ['./singlemeeting.component.css']
})
export class SinglemeetingComponent implements OnInit {
@Input() singleMeetingID: String;
constructor(private meetServ: MeetingService,
private proServ: ProjectService,
private taskServ: ContentService) { }
ngOnInit() {
this.getData()
}
getData() {
this.meetServ.rolloutMeeting(this.singleMeetingID)
.subscribe(data => this.meeting : any = data)
console.log(this.meeting)
}
tasks = []
projects = []
meeting : any
}
Upon doing this: .subscribe(data => console.log(data)), I receive the exact output as when I log the meeting array on my server.
I have tried various methods to bind it to my meeting Array in the Client like:
.subscribe(data => this.meeting = data[0] as meeting)
and
.subscribe(data => this.meeting = data as meeting)
and
.subscribe(data => function {
this.meeting = data
})
For each attempt, I initialized the meeting var as any, an array, and without any declaration.
However, none of those attempts seemed to work for me. Console.log(this.meeting) always gives me undefined, while console.log(data) always returns the answer I actually want.
My goal is to put data[0] into a meeting variable and run my meeting interface over it, data[1] into project Array with the project interface, and so on...
Thank you to anyone who reads this and tries to help.
Best Regards