0

Tengo el siguiente problema, necesito obtener los cambios en vivo de un JSON para mostrar la data en HTML.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs/Rx";

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

  datosTabla: any[] = [];
  url: string = 'https://sitio.com/miJSON';

  constructor( private http: HttpClient ) {
    http.get(this.url).subscribe( (data) => {
      this.datosTabla = data.feed.entry;
      console.log(data);
    });
  }

  ngOnInit() {

  }

}

Guardo los datos que necesito en el arreglo datosTabla[] usando el subscribe. Para poder imprimirlos en el HTML de esta manera:

<tbody>
    <tr *ngFor="let dato of datosTabla">
        <td>{{ dato.gsx$serie.$t }}</td>
        <td>{{ dato.gsx$temporadas.$t }}</td>
    </tr>
</tbody>

Pero necesito que los cambios se vean reflejados sin recargar el sitio, ya intenté utilizando el pipe async en el ngFor pero me genera el error:

TablaComponent.html:9 ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'

¿De qué manera podría consumir y almacenar los datos para que se actualicen en el HTML de forma automática?

1 respuesta 1

3

Cuando usas async lo estas diciendo es que datosTabla es un objeto asíncrono (un Observable), pero en realidad en tu código datosTabla es un array normal. Por eso te da el error.

Lo que debes hacer es transformar el observable que te da la respuesta del servidor y guardar ese Observable transformado en datosTabla. Algo así:

datosTabla: Observable<any[]> = new Observable();
url: string = 'https://sitio.com/miJSON';

constructor( private http: HttpClient ) {

  this.datosTabla = http.get(this.url)
    .pipe(
      map((data) => {
        console.log(data);
        return data.feed.entry;
      })
    );
}

Ahora sí, puedes usar async en tu plantilla:

<tbody>
    <tr *ngFor="let dato of datosTabla | async">
        <td>{{ dato.gsx$serie.$t }}</td>
        <td>{{ dato.gsx$temporadas.$t }}</td>
    </tr>
</tbody>

No es necesario que te subscribas al Observable transformado que guardamos en datosTabla pero aun así puedes hacerlo si quieres logear algo o hacer algún tipo de operación basado en la respuesta:

datosTabla: Observable<any[]> = new Observable();
url: string = 'https://sitio.com/miJSON';

constructor( private http: HttpClient ) {

  this.datosTabla = http.get(this.url)
    .pipe( // Transformamos el Observable y lo guardamos
      map((data) => data.feed.entry)
    );

  this.datosTabla.subscribe(datos => {
    console.log(datos);
    // Hacer algo más con los datos
  });
}
3
  • Te agradezco tu respuesta, eso ya me elimina el error del pipe async y muestra los datos, pero sigue sin actualizar la información según los cambios en el JSON externo.
    – akko
    Commented el 9 jul. 2018 a las 19:09
  • 1
    @akko Eso ya dependería del servidor y de como estas enviando las actualizaciones. Tal vez te interese saber acerca de Server Sent Events
    – Nery Ortez
    Commented el 9 jul. 2018 a las 19:49
  • @akko Si la respuesta te fue de ayuda, podés marcarla como aceptada ;)
    – Nery Ortez
    Commented el 3 ago. 2018 a las 17:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.