I am trying to populate MatTableDataSource using Http local call to JSON. But it's not working. I think the assignment operation in 'subscribe()' in 'data-table.component.ts' file is not working. I tried to debug and tried to find the solution, but nothing worked and most of the time I end up breaking up m code. Please help me.
Thanks
Below are the codes with respective file names:
data-table.component.ts
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { FormDataService } from 'src/app/services/form-data.service';
@Component({
selector: 'app-data-table',
templateUrl: './data-table.component.html',
styleUrls: ['./data-table.component.css']
})
export class DataTableComponent {
displayedColumns: string[] = ['request_number', 'request_name', 'last_updated_date', 'completion', 'status'];
ELEMENT_REQUEST = [];
constructor(private _formDataService: FormDataService) {
console.log("Before getting data: ", this.ELEMENT_REQUEST)
this._formDataService.getformData()
.subscribe((data:any) => {
this.ELEMENT_REQUEST = data; // This line not working!
console.log("Inside: ",data);
}, err => {
console.log(err);
})
console.log("After getting data: ", this.ELEMENT_REQUEST)
}
dataSource = new MatTableDataSource(this.ELEMENT_REQUEST);
logData(row) {
console.log(row);
}
applyFilter(filterValue: String) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
form-data-model.ts
export interface Form_Data {
request_name: string;
request_number: number;
last_updated_date: string;
completion: number;
status: string;
}
form-data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Form_Data } from './form-data-model';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FormDataService {
_url = "/assets/data/form_data.json"
constructor(private http: HttpClient) { }
getformData(): Observable<Form_Data[]> {
return this.http.get<Form_Data[]>(this._url);
}
}
I got this snippet from the chrome console. Before getting Data is all good, Inside is also working, but After getting data, there is nothing in the array Image