Displaying array data from external json file in Angular?

Question

Can't seem to work out were I am going wrong here. I have an internal SPA in Angular that is referencing a externally hosted JSON file which is set out as below:

[
{
    "hostname": "BNE-WKS-001", 
    "location": "Level 7, Room H", 
    "anydesk": "561", 

    
},
{
    "hostname": "BNE-WKS-002", 
    "location": "Level 7, Room G", 
    "anydesk": "903", 

    
},
]

As it's a single use function I haven't created a service for this and just have added to the component that should be showing the data once received as below:

import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import { HttpClient } from '@angular/common/http';

export interface AirServerDevice {
  location: string;
  hostname: string;
  anydesk: string;
}

@Component({
  selector: 'app-devices',
  templateUrl: './devices.component.html',
  styleUrls: ['./devices.component.css']
})
export class DevicesComponent implements OnInit {

  public title = "Air Server Locations";
  public devices = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {

     this.http.get("http://billboards.xxxxxxx.com/AirServer/devices.json")
     .subscribe((data:any) => { this.devices.push(data);
     })   
     console.log(this.devices) 
  }
  displayedColumns: string[] = ['hostname', 'location', 'anydesk',];
  Airserver_Data: AirServerDevice[] = this.devices; 
  dataSource = new MatTableDataSource(this.Airserver_Data);
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  } 
}

And in the HTML file I'm trying to display it in a table with MatTableDataSoure

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="hostname">
    <th mat-header-cell *matHeaderCellDef> Hostname </th>
    <td mat-cell *matCellDef="let device"> {{device.hostname}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef> Meeting Room </th>
    <td mat-cell *matCellDef="let device"> {{device.location}} </td>
  </ng-container>

The data from the json file prints to the console fine but I cannot get the data to display in the table and it's just blank. This is still very new to me and I am working it out as I go along but I can't seem to gte this to work. console

Answer 1

Can't seem to work out were I am going wrong here. I have an internal SPA in Angular that is referencing a externally hosted JSON file which is set out as below:

[
{
    "hostname": "BNE-WKS-001", 
    "location": "Level 7, Room H", 
    "anydesk": "561", 

    
},
{
    "hostname": "BNE-WKS-002", 
    "location": "Level 7, Room G", 
    "anydesk": "903", 

    
},
]

As it's a single use function I haven't created a service for this and just have added to the component that should be showing the data once received as below:

import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';
import { HttpClient } from '@angular/common/http';

export interface AirServerDevice {
  location: string;
  hostname: string;
  anydesk: string;
}

@Component({
  selector: 'app-devices',
  templateUrl: './devices.component.html',
  styleUrls: ['./devices.component.css']
})
export class DevicesComponent implements OnInit {

  public title = "Air Server Locations";
  public devices = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {

     this.http.get("http://billboards.xxxxxxx.com/AirServer/devices.json")
     .subscribe((data:any) => { this.devices.push(data);
     })   
     console.log(this.devices) 
  }
  displayedColumns: string[] = ['hostname', 'location', 'anydesk',];
  Airserver_Data: AirServerDevice[] = this.devices; 
  dataSource = new MatTableDataSource(this.Airserver_Data);
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  } 
}

And in the HTML file I'm trying to display it in a table with MatTableDataSoure

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="hostname">
    <th mat-header-cell *matHeaderCellDef> Hostname </th>
    <td mat-cell *matCellDef="let device"> {{device.hostname}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="location">
    <th mat-header-cell *matHeaderCellDef> Meeting Room </th>
    <td mat-cell *matCellDef="let device"> {{device.location}} </td>
  </ng-container>

The data from the json file prints to the console fine but I cannot get the data to display in the table and it's just blank. This is still very new to me and I am working it out as I go along but I can't seem to gte this to work. console