Cannot assign complex data into array variable in Angular 6

Question

I have implement a method to retrieve data from HTTP request and it's working fine and return complex data list.

But my concern is when I assign that returned list to variable,It's not assigning.So I can't even loop that variable because it's undefined in .ts file.

This is my Component

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

This is my HTTP service

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

This behavior makes no sense. Are you sure it's not just a glitch with your debugger not being on the line it thinks it's on? What do you see if you `console.log` both `data` and `this.friendList`? — Matt McCutchen, Aug 27 '18 at 22:54
@MattMcCutchen Yes data displaying if I use console.log but can't see in debugger . But problem is, If I need to access that **this.friendList** in other place suck as inside other function it shows as **undefined** — Isanka Thalagala, Aug 28 '18 at 06:14
This may be the classic problem of trying to use the result of an asynchronous operation before it completes. Have you read https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call ? — Matt McCutchen, Aug 28 '18 at 13:09

score 1 · Answer 1 · answered Aug 28 '18 at 13:56

It's a debugger bug. It gets confused by this. If you were to debug the generated javascript you'd get the right values, but in your case, the debugger resolves this to window, which most likely won't have a friendList field or property resulting in displaying "undefined". And this is why I never debug typescript code, but the generated javascript instead. Not saying you shouldn't, just be aware of that caveat.

score 1 · Accepted Answer · answered Aug 29 '18 at 04:12

1

Issue have been solved.. :D It worked after I changed like this.

 getAllFriendsFromDatabase() {
    var self = this;
    this.userService.getUsers().subscribe(
      data => {
        self._moderatorList = data as ChatUserVM[];
        console.log('DB usersss ---> ' + self._moderatorList);
      }
    );
  }

answered Aug 29 '18 at 04:12

Isanka Thalagala

1,625
3
16
32

You shouldn't be doing that in typescript, as that's kind of what it does when it generates the javascript code. – bug-a-lot Aug 31 '18 at 10:45

Cannot assign complex data into array variable in Angular 6

2 Answers2