logo
down
shadow

Angular - Populating Material Table with JSON


Angular - Populating Material Table with JSON

By : Selim Here
Date : October 18 2020, 01:08 AM
seems to work fine The angular material documentation leaves much to be desired. There are some links out there that helped me put something like this together:
code :
connect(): Observable<UserData[]> {
    // Listen for any changes in the base data, sorting, filtering, or pagination
    const displayDataChanges = [
      this._exampleDatabase.dataChange,
      this._sort.sortChange,
      this._filterChange,
      this._paginator.page,
    ];

    this._exampleDatabase. getRepoIssues()
export class ExampleDatabase {
  /** Stream that emits whenever the data has been modified. */
  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);

  get data(): UserData[]{
    return this.dataChange.value;
  }

  private issuesUrl = 'https://mydemourl...com/angular/getdata.php';  // URL to web API
  getRepoIssues(): void {
    const myData = this.http.get(this.issuesUrl)
                   .map(this.extractData);

    myData.subscribe(
        result => {
            this.dataChange.next(result);
        },
    );
  }

  extractData(result: Response): UserData[] {
    return result.json().map(issue => {
      return {
        id: issue.id,
        location: issue.location,
        title: issue.title,
        color: issue.color,
      };
    });
  }


Share : facebook icon twitter icon
populating from json with Angular1 (Using Angular Material)

populating from json with Angular1 (Using Angular Material)


By : murali mohan A
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further You just need to use one more ng-repeat to iterate all the tags for each data item. Here is the code.
code :
<div ng-repeat="data in data.data" layout="column">
 <span> ID: {{data.id}}</span>
 <md-checkbox ng-repeat="eachTag in data.tags">
  {{eachTag}}
 </md-checkbox>
</div>
Adding Angular material Menu to each row in Angular Material Table using more button at the end of a sticky table

Adding Angular material Menu to each row in Angular Material Table using more button at the end of a sticky table


By : user2608190
Date : March 29 2020, 07:55 AM
To fix this issue I have a sticky table that I want to add more_vert button toggle to but I'm unable to achieve this because I don't know how to distinguish each drop down menu list from each other. , You are referencing wrong menu.
code :
[matMenuTriggerFor]="user.user_id" 
[matMenuTriggerFor]="appMenu"
Why is my data not populating in Angular material table

Why is my data not populating in Angular material table


By : Praful
Date : March 29 2020, 07:55 AM
this will help You don't need to instantiate a datasourc object. Just pass your Task[] to mat-table.
A better approach is to use async pipe to avoid to subscribe observable
code :
@Component({
  selector: 'trial',
  templateUrl: './trial.component.html',
  styleUrls: ['./trial.component.scss']
})
export class TrialComponent implements OnInit {
  dataSource$: Observable<Task[]>;
  displayedColumns = ['title', 'note'];

  constructor(private _httpService:HttpService) { }

  ngOnInit() {
    this.dataSource$ = this.getTask();
  }

  getTask(){
    return this._httpService.getTasks().pipe(
        map((res) => res.tasks)
    );

  }
}
<table mat-table [dataSource]="dataSource$ | async" class="mat-elevation-z8"> 

    <ng-container matColumnDef="title"> 
      <th mat-header-cell *matHeaderCellDef> Title </th> 
      <td mat-cell *matCellDef="let task"> {{task.title}} </td>
    </ng-container>
    <ng-container matColumnDef="note"> 
      <th mat-header-cell *matHeaderCellDef> Note </th> 
      <td mat-cell *matCellDef="let task"> {{task.note}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>
Angular 5 Material-UI dynamic Mat Table from json data

Angular 5 Material-UI dynamic Mat Table from json data


By : user3305698
Date : March 29 2020, 07:55 AM
Does that help I am hitting an api that can will return different JSON's, each meaning a different table. , Import MatTableDataSource in your .ts file
code :
import {MatTableDataSource} from "@angular/material";
cols: MatTableDataSource<Any>;
 this.cols = new MatTableDataSource(this.arrData['responsePayload']);
 <table mat-table [dataSource] = "cols" class="mat-elevation-z8">

       <!-- Company Column -->
       <ng-container matColumnDef="company">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.Company}} </mat-cell>
       </ng-container>

       <!-- Contact Column -->
       <ng-container matColumnDef="contact">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Contact </mat-header-cell>
           <mat-cell *matCellDef="let row" > {{row.Contact}} </mat-cell>
        </ng-container>

       <!-- Country Column -->
       <ng-container matColumnDef="country">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.Country}} </mat-cell>
       </ng-container>

       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table> 
How to implement (sort, pagination) for Angular Material table which retrieves data through Rest API (JSON)?

How to implement (sort, pagination) for Angular Material table which retrieves data through Rest API (JSON)?


By : Dileep Kumar
Date : March 29 2020, 07:55 AM
Does that help MatTableDataSource is a data source that accepts a client-side data array and includes native support of filtering, sorting (using MatSort), and pagination (using MatPaginator). Class MatTableDataSource extends the abstract class DataSource, hence there's no need to provide custom implementation as you intend to do with UserDataSource.
Therefore, get rid of UserDataSource and rewrite your TablefilterComponent as follows.
code :
export class TablefilterComponent implements OnInit {
  displayedColumns: string[] = ['phone', 'name', 'email', 'website', 'address']; 
  dataSource: MatTableDataSource<Contact>; 

  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.fetchPosts().subscribe(contacts => {
       this.dataSource = new MatTableDataSource(contacts);
       this.dataSource.sort = this.sort;
       this.dataSource.paginator = this.paginator;
    });
  }
}
Related Posts Related Posts :
  • Insert Bulk of data to Postgresql
  • Typescript JSON string to class
  • How to sendi HTTP request and parse JSON response in TIZEN watch using Native?
  • How do I remove repetitions from multiple JSON files?
  • Correct JSON structure for Google Line Chart
  • Quicker way to deepcopy objects in golang
  • Postman test for empty dictionary value of json name
  • JSON Schema: How to correctly use oneOf reference in json?
  • Perl: JSON fails if a thread is started
  • XSLT 3.0, Converting XML to JSON
  • How to correctly produce and consume UTF-8 json in Python3? (with flask and requests)
  • Unexpected nil in JSON strings
  • How to auto-detect headers of json for a table in Angular4?
  • JQ sorting key by arbitrary order
  • How to architecture a json object model in swift with Codable protocol
  • In Karate DSL, how can I use the replace text for other data types such as int, float, Big, etc.?
  • Postgresql: How to perform LIKE query on a json array?
  • Can't Access JSON Properties Of Firestore Data With String Interpolation
  • json nmp package not working
  • Unable to access nested value in JSON string from ajax response
  • How to pretty print using jq, so that multiple values are on the same line?
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com