Parse JSON with AngularJS 6

[l_braam]

Mijn vraag
Hoe kan ik de volgende JSON data tonen in een mat-table mbv AngularJS
Mijn probleem is dat ik de JSON data niet goed geconverteerd krijg.

Ik zou dus graag de http.get methode aanpassen dat mijn data overeenkomt met mijn interface

JSONData:
{"dummyArray":[{"ID":1,"data":"data"}{"ID":2,"data":"data"}{"ID":3,"data":"data"}]

Relevante software en hardware die ik gebruik
AngularJS 6

Wat ik al gevonden of geprobeerd heb

De serviceprovider (heir zit wss mijn fout)

JavaScript:

import { Injectable }   from '@angular/core';
import { HttpClient }   from '@angular/common/http';
import { Observable }   from 'rxjs';
import { Dummy } from '../models/dummy.model';

@Injectable()
export class DummyService {

  constructor(private http: HttpClient) { }
  
  getDummy(): Observable<Dummy[]> {
    return this.http.get<Dummy[]>('http://localhost:8000/api/dummys');
  }
}

De interface

JavaScript:

export interface Dummy {
    DummyID: number;
    OS: string;
    machnr: number;
    posid: number;
    posname: string;
}

de dummytable.component.ts

JavaScript:

import { Component, OnInit } from '@angular/core';
import { DummyService } from '../../services/dummy.service';
import { Observable } from 'rxjs';
import {DataSource} from '@angular/cdk/collections';
import { Dummy } from '../../models/dummy.model';

@Component({
  selector: 'dummytable',
  templateUrl: './dummytable.component.html',
  styleUrls: ['./dummytable.component.css']
})
export class DummytableComponent implements OnInit {
  dataSource = new DummyDataSource(this.dummyService);
  displayedColumns = ['DummyID', 'OS', 'machnr', 'id'];
  constructor(private dummyService: DummyService) { }
  
  ngOnInit() {
  }
}

export class DummyDataSource extends DataSource<any> {
  constructor(private dummyService: DummyService) {
    super();
  }
  connect(): Observable<Dummy[]> {
    return this.dummyService.getDummy();
  }
  disconnect() {}
}

de dummytable.component.html

JavaScript:

<div>
  <mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="DummyID">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let dummy"> {{ dummy.DummyID }} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="OS">
      <mat-header-cell *matHeaderCellDef> OS </mat-header-cell>
      <mat-cell *matCellDef="let dummy"> {{ dummy.OS }} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="machnr">
      <mat-header-cell *matHeaderCellDef> MachNr </mat-header-cell>
      <mat-cell *matCellDef="let dummy"> {{ dummy.machnr }} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef> PosID </mat-header-cell>
      <mat-cell *matCellDef="let dummy"> {{ dummy.id }} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

[q-enf0rcer.1]

{"dummyArray":[{"ID":1,"data":"data"}{"ID":2,"data":"data"}{"ID":3,"data":"data"}]

Is absoluut geen valid JSON. Gebruik eerst eens een JSON validator voordat je verder gaat. Aangezien je HttpClient gebruikt wordt data intern omgezet van JSON string naar een JavaScript Object. Daar hoef jij dus niets voor te doen.

[ Voor 6% gewijzigd door q-enf0rcer.1 op 12-09-2018 09:43 ]

[Stoelpoot]

Om verder te gaan op wat @q-enf0rcer.1 zegt:

Je begint de JSON met een object, maar dat sluit je niet af. Je wilt de JSON dan gebruiken als Array, terwijl de array een property is van het object wat je stuurt. Bovendien zit er geen separator tussen je array items.

code:

[
    {"ID":1,"data":"data"},
    {"ID":2,"data":"data"},
    {"ID":3,"data":"data"}
]

Bovenstaande JSON zal al een stuk dichter in de buurt komen. Zorg er dan uiteraard wel voor dat de JSON ook de class matcht waar je heen wilt casten.

Gebruik ook vooral de Chrome / Firefox debugger om na de call naar http.get eerst te controleren of je objecten goed zijn doorgekomen. Als dat niet zo is, hoef je er ook niet op te rekenen dat de rest goed zal gaan.

[ Voor 17% gewijzigd door Stoelpoot op 12-09-2018 09:56 ]

[l_braam]

Ik bedoel dat mijn call er zo uit als ik een get doe richting mijn backend.

Dus wanneer ik naar "Http://localhost:8000/api/dummys"
Zie ik de volgende data
{"Dummys":[{"ID":1,"data":"data"}{"ID":2,"data":"data"}{"ID":3,"data":"data"}]}
(Wel met afsluiter)

Ik doe dus ergens in mijn javascript iets fout waardoor ik dit niet goed kan inlezen.

[Verwijderd]

Je JSON is nog steeds niet valid. Gebruik een validator om het desnoods te controleren:

https://jsonlint.com/

Zolang je JSON niet valid is, hoef je niet verder te gaan want je JS zal nooit werken. Fix dus je JSON, zoals al twee keer aangegeven.

[l_braam]

Bedankt voor het tippen van de JSON validater site Fledder, mijn JSON is wel valid. alleen mijn typ skills niet bepaald.
men JSON is;{"Dummys":[{"ID":1,"data":"data"},{"ID":2,"data":"data"},{"ID":3,"data":"data"}]}

Mijn probleem zit hem in de DummyService ik weet niet hoe ik hier de JSON kan omzetten. ik denk dat ik de data nog moet mappen of subscriben alleen wil me dit niet lukken.
alvast bedankt.

[Ryur]

En niet dat dit helpt met je probleem, maar een opmerking:

Je hebt AngularJS (dat is met versienummer 1.x serie)
en je hebt Angular (zonder JS erachter, en dat is > 2.x serie, waaronder jouw versie)

[Edwin88]

Je zou eens een breakpoint moeten zetten in je scriptje, en dan stap voor stap volgen wat er nu eigenlijk gebeurt. Dan zie je waarschijnlijk al snel waar het fout gaat.

Als je niet weet hoe je breakpoints gebruikt; google en lees je in; dat is een essentiele debug tool voor de moderne developer. Het gaat je heel veel tijd schelen.

[b2vjfvj75gjx7]

Pfff... je kan gewoon plain-vanilla JS parsen - zonder zonder overkill framework.

En als je wil weten waarom het mis gaat?

Zet er even een "try / catch" in en vang de " catch ( $error ) " af -> 9 van de 10 keer is het een tikfout ( ; : ' " ) en dat is framework-agnostisch.

https://javascript.info/try-catch

[Edwin88]

Je krijgt overigens een observable, verwacht de mat table een observable als input? Anders moet je even een async pipe toevoegen.

Je mist ook error handling en je service kan nu indien verkeerd gebruikt continue je API callen. Elke subscription maakt een API call zo. Ga je nog cachen?