Angular-cli ver 13.3.7 Subscribe ERROR this.data is undefined

Question

I want to return array from [Firebase] Realtime Database

This is my code:

add-student.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CurdService } from '../shared/curd.service';
import Swal from 'sweetalert2';
import { Student } from '../shared/student';
@Component({
  selector: 'app-add-student',
  templateUrl: "./regist.html",
  styles: [
  ]
})
export class AddStudentComponent implements OnInit {
  public studentForm: FormGroup;
  somthing: any; somestuden: Student[];
  avilableor: boolean = true;
  data: any[];
  some: any[];
  constructor(
    public crudApi: CurdService,
    public fb: FormBuilder,
  ) {}
  ngOnInit() {
    this.crudApi.GetStudentsList();
    this.studenForm();
    this.crudApi.GetStudentsList().snapshotChanges().subscribe(data =>{
      this.data = data;
    })
    console.log(this.data);
    }
  studenForm() {
    this.studentForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(5)]],
      fullname: [''],
      email: [''],
      note: [''],
    });
  }
  get username() {
    return this.studentForm.get('username');
  }
  get fullname() {
    return this.studentForm.get('fullname');
  }
  get email() {
    return this.studentForm.get('email');
  }
  get note() {
    return this.studentForm.get('note');
  }
  ResetForm() {
    this.studentForm.reset();
  }
  validusername(){
    
    
  
  }
  
}

curd.service.ts

import { Injectable } from '@angular/core';
import { Student } from './student';
import {
  AngularFireDatabase,
  AngularFireList,
  AngularFireObject,
} from '@angular/fire/compat/database';

@Injectable({
  providedIn: 'root'
})
export class CurdService {
  studentsRef: AngularFireList<any>;
  studentRef: AngularFireObject<any>;
  constructor (private db: AngularFireDatabase){}
    
  AddStudent(student: Student){
    this.studentsRef.push({
      username: student.username,
      fullname: student.fullname,
      email: student.email,
      note: student.note,
    });
  }

  GetSudent(id: string){
    this.studentRef = this.db.object('students-list/' + id);
    return this.studentsRef;
  }

  GetStudentsList() {
    this.studentsRef = this.db.list('students-list');
    return this.studentsRef;
  }

  UpdateStudent(student: Student) {
    this.studentRef.update({
      username: student.username,
      fullname: student.fullname,
      email: student.email,
      note: student.note,
    });
  }

  DeleteStudent(id: string) {
    this.studentRef = this.db.object('students-list/' + id);
    this.studentRef.remove();
  }
}

Error Message:

undefined
add-student.component.ts:28:12 ERROR TypeError: this.data is undefined

Can someone tell me, how to solve this problem or is there any other way to return data from firebase realtime database to my variable?

subscribe is asynchronous. `data` may not have any value outside of subscribe — Suraj Rao, Jul 08 '22 at 04:46
@SurajRao ahh so i cannot store data outside of subscribe. thanks for your information — zTzyrant, Jul 08 '22 at 11:55

score 0 · Accepted Answer · answered Jul 08 '22 at 03:07

0

You need to declare data

export class HelloComponent implements OnInit {
    data = [];
....
]

answered Jul 08 '22 at 03:07

Myat Thiha

273
2
8

I have defined data: any[]; on my script. and the data is still undefined. – zTzyrant Jul 08 '22 at 03:22
Can you add all of your ts code in your question？By the way , change your data：any[] to data = []; If it doesn't work, please add your full code of ts to your question. – Myat Thiha Jul 08 '22 at 03:34

score 0 · Answer 2 · answered Jul 08 '22 at 07:23

Here the subscribe which you are trying is asynchronous. So if try, to console the data value on line 28 which is outside the callback won't have the value. So, once we receive the success call back, we could try logging the value inside the success callback. Please refer the snippet below:

ngOnInit() {
  this.crudApi.GetStudentsList();
  this.studenForm();
  this.crudApi.GetStudentsList().snapshotChanges().subscribe(data =>{
    this.data = data;
    console.log(this.data); // Here we could see the value coming from service.
  });
}

Hope this helps.

Angular-cli ver 13.3.7 Subscribe ERROR this.data is undefined

2 Answers2