3
votes

Comment remplir une table html à partir de http angulaire qui renvoie un tableau de JSON

J'ai un service qui renvoie un tableau d'objets JSON que j'essaye de charger dans une table html. Le http get renvoie des données mais les données ne seront pas chargées dans la table. Je soupçonne que je peux avoir un problème avec les types de données que j'utilise dans mon code dactylographié. Ce code n'enregistre aucune erreur dans la console.

Si je commente la table de données et que j'ajoute une nouvelle ligne avec {{myData}}, la page affiche "function values () {[native code]}"

[{"fileName":"sometext.txt", "index": 1},{"fileName":"sometext2.txt", "index": 2}]

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const routes = {
  dataEndpoint: 'http://localhost:53452/api/data'
};

@Injectable()
export class MyService {
  constructor(private httpClient: HttpClient) {}

  getMyData(): Observable<any> {
    return this.httpClient
      .cache()
      .get(routes.dataEndpoint)
      .pipe(
        map((body: any) => body.values),
        catchError(() => of('Error, could not load My Data'))
      );
  }
}

import { Component, OnInit } from '@angular/core';
import { finalize } from 'rxjs/operators';

import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-data',
  templateUrl: './my-data.component.html',
  styleUrls: ['./my-data.component.scss']
})
export class MyComponent implements OnInit {
  myData: any;
  isLoading: boolean;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.isLoading = true;
    this.myService
      .getMyData()
      .pipe(
        finalize(() => {
          this.isLoading = false;
        })
      )
      .subscribe((myData: any) => {
        this.myData = myData;
      });
  }
}

JSON renvoyé par get strong >

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr>
            <th scope="col" data-field="myData.fileName">File Name</th>
            <th scope="col" data-field="myData.index">Index</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

typescript angular rxjs html-table observable

0 commentaires

3 Réponses :

1
votes

Vos données sont un tableau, vous devez donc utiliser * ngFor , comme ceci:

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr *ngFor="let data of myData">
            <th scope="col" data-field="data.fileName">File Name</th>
            <th scope="col" data-field="data.index">Index</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

2 commentaires

Cela a été utile mais le vrai problème était dans le service.

le service renvoie-t-il ces données? Que revient-il vraiment?

2
votes

Je pense que vous essayez d'afficher les données dans le corps du tableau. Essayez ceci.

<div class="container-fluid">
  <div class="jumbotron text-center">
    <h1>
      My Data
    </h1>
  </div>
  <div>
    <app-loader [isLoading]="isLoading"></app-loader>
    <table class="table table-hover table-responsive" [hidden]="isLoading">
      <thead>
        <tr>
            <th scope="col">File Name</th>
            <th scope="col">Index</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let file of myData">
            <td>{{file.fileName}}</td>
            <td>{{file.index}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

1 commentaires

Cela a été utile mais le vrai problème était dans le service.

0
votes

J'ai dû mettre à jour le service pour résoudre le problème qui impliquait l'ajout d'une interface et le changement de body.values dans body. Voir https://angular.io/guide/http#type-checking-the -response pour plus d'informations.

Mise à jour de my-data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const routes = {
  dataEndpoint: 'http://localhost:53452/api/data'
};

export interface MyDataContext {
  FileName: string;
  Index: number;
}

@Injectable()
export class MyService {
  constructor(private httpClient: HttpClient) {}

  getMyData(): Observable<MyDataContext> {
    return this.httpClient
      .cache()
      .get<MyDataContext>(routes.dataEndpoint)
      .pipe(
        map((body: any) => body),
        catchError(() => of('Error, could not load My Data'))
      );
  }
}

0 commentaires