I have successfully implemented a method for retrieving data from an HTTP request, and it is functioning well, returning a complex list of data.
https://i.sstatic.net/Hxpz2.png
However, my concern arises when I try to assign the returned list to a variable. It seems that the assignment is not happening correctly, as the variable remains undefined in the .ts file and I am unable to loop through it.
https://i.sstatic.net/56EAh.png
Below is the Component code:
import { Component, OnInit } from '@angular/core';
import { ChatUserVM } from '../shared/models';
import { UserService } from '../shared/service/user.service';
@Component({
selector: 'app-chat-footer',
templateUrl: './chat-footer.component.html',
styleUrls: ['./chat-footer.component.css'],
})
export class ChatFooterComponent implements OnInit {
friendList: ChatUserVM[] = [];
constructor(private userService: UserService) {
}
ngOnInit() {
this.getAllFriendsFromDatabase();
}
getAllFriendsFromDatabase() {
this.userService.getUsers().subscribe(
data => {
this.friendList = data;
console.log('DB usersss ---> ' + this.friendList);
}
);
}
}And here is the HTTP service code:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {ChatUserVM} from "../models";
@Injectable()
export class UserService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get<ChatUserVM[]>('https://localhost:44346/api/chat/GetAllUsers');
}
}