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
– Matt McCutchen, Commented Aug 27, 2018 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
– Isanka Thalagala, Commented Aug 28, 2018 at 6:14
This may be the classic problem of trying to use the result of an asynchronous operation before it completes. Have you read stackoverflow.com/questions/14220321/… ? — Matt McCutchen
– Matt McCutchen, Commented Aug 28, 2018 at 13:09

bug-a-lot · Accepted Answer · 2018-08-28 13:56:42Z

1

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.

answered Aug 28, 2018 at 13:56

bug-a-lot

2,4541 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Isanka Thalagala · Accepted Answer · 2018-08-29 04:12:46Z

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, 2018 at 4:12

Isanka Thalagala

1,7513 gold badges20 silver badges44 bronze badges

1 Comment

bug-a-lot Over a year ago

You shouldn't be doing that in typescript, as that's kind of what it does when it generates the javascript code.

Collectives™ on Stack Overflow

Cannot assign complex data into array variable in Angular 6

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related