.subscribe isn't putting data inside my array

Question

I am trying to put the data obtained form the database in the accountInfo array. I am certain the data is obtained from the database but when I log the array it is empty. I have tried everything and can't figure out why it doesn't work.

account.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { AccountService } from './account.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { AccountInfo } from './accountListItem';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss'],
  providers: [AccountService],
})
export class AccountComponent implements OnInit {

  public accountInfo = [];
  public userId: string;
  constructor(private accountService: AccountService) { }

  ngOnInit() {
    this.userId = localStorage.getItem('user_id');
    this.accountService.getAccountInfo(this.userId)
    .subscribe(data => this.accountInfo = data);
    console.log(this.accountInfo);
  }
}

account.service.ts

import { Injectable } from '@angular/core';
import { Observable , of } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { AccountInfo } from './accountListItem';
import { environment } from '../../environments/environment';

@Injectable()
export class AccountService {
  constructor(private http: HttpClient) {}

  getAccountInfo(userId: any): Observable<AccountInfo[]> {
    return this.http.get<AccountInfo[]>(`${environment.apiUri}/user?userid=${userId}`);
  }
}

Why do you have `.pipe()` hanging off the end of your `http.get`? — R. Richards, Jan 10 '19 at 15:18
Was a suggestion from someone, but it doesnt work either way. — HenkdePeer, Jan 10 '19 at 15:21
Of course `console.log(this.accountInfo);` will return an empty array. Your code is running asynchronously and the `console.log` is ran before the observable returns any data — Narm, Jan 10 '19 at 15:22
You are inserting your element in an asynchronous flow, but you are printing the result in a syncrhonous way. So when you print your array, the element hasn't been inserted yet. Please, learn how asynchronous javascript works — Christian Vincenzo Traina, Jan 10 '19 at 15:22
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Igor, Jan 10 '19 at 15:25

score 1 · Accepted Answer · answered Jan 10 '19 at 15:30

You have to put the console.log() inside the subscribe, because the accountInfo is only available after the async call is completed like this:

ngOnInit() {
  this.userId = localStorage.getItem('user_id');
  this.accountService.getAccountInfo(this.userId)
  .subscribe(data => {
    this.accountInfo = data;
    console.log(this.accountInfo);
  });
}

score 0 · Answer 2 · answered Jan 10 '19 at 15:27

If you say that you received the data well from database, you should try to use subscribe (like code below) to ensure that you dont have errors, and print the solution in console.log when you are sure that you received data:

this.accountService.getAccountInfo(this.userId).subscribe(
     data => {
        this.accountInfo = data;
        console.log(this.accountInfo);
    },
     error => {
        console.log(error);
    },
     () => {
        // 'onCompleted' callback.
    }
);

.subscribe isn't putting data inside my array

2 Answers2