0

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

  • http-requests are asynchronous, as you can see in your console logs, `After getting data:` is printed before `inside`. Welcome to the asynchronous world, you will face this constantly, so I suggest to carefully read the duplicates :) – AT82 Jan 22 '20 at 19:19
  • I would really like to thank you, I had no idea about async calls. With your comment, I became able to understand what's going on in my code and I fixed it, Thanks a lot. – Shekhar Jha Jan 23 '20 at 04:12

0 Answers0