getting empty data from an array in angular

Question

I'm trying to display some data using datatable. I have data stored in an array and I'm able to console those values after fetching them but when i console it in the datatable it shows an empty array. How do I resolve this?

component.ts

user_data:any= [];

constructor(private http:Http, private Authentication:AuthService) {}

getUsersFromServices():void{
this.Authentication.fetch_userdata().subscribe(
  (data) =>{ 
    this.user_data = data;  
    console.log(this.user_data); //able to console the values here
  },err =>{
    console.log(err);
  }
 )
}

dataTable(){
console.log(this.user_data); //getting an empty array here
this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 4,
  columnDefs:[{
    targets:[0,1,2,3,4],
    orderable:false
  }],
  data:this.user_data,
  columns:[
    {
      title:'id',
      data:'user.id'
    },
    {
      title:'First Name',
      data:'user.first_name'
    },
    {
      title:'Last Name',
      data:'user.last_name'
    },
    {
      title:'Email',
      data:'user.email'
    },
    {
      title:'Role',
      data:'role'
    }
  ]
};
}


ngOnInit(): void {
this.getUsersFromServices();
this.dataTable();
}

Sachin Shah · Accepted Answer · 2018-12-12 18:09:43Z

1

Try this

console.log(this.user_data); //able to console the values here
this.dataTable();

Call your method hear instead of call in ngOnInit

answered Dec 12, 2018 at 18:09

Sachin Shah

4,5634 gold badges26 silver badges55 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2018-12-12 18:06:03Z

0

You need to call the dataTable() function once you get the data within your subscribe, otherwise you are trying to access before the data being recieved from the request, change it as follows,

this.Authentication.fetch_userdata().subscribe(
  (data) =>{ 
    this.user_data = data;  
    console.log(this.user_data); //able to console the values here
    this.dataTable();
  },err =>{
    console.log(err);
  }
 )
}

answered Dec 12, 2018 at 18:06

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Sachin Shah Over a year ago

@Sajeetharan Congratulation for cap.. :)

Collectives™ on Stack Overflow

getting empty data from an array in angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related