0

Como puedo solucionar el siguiente error

introducir la descripción de la imagen aquí

Os dejo el codigo de mi proveedor:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class WordpressProvider {

baseUrl:string ="http://mipagina.com/wp-json/wp/v2/posts/9159";

  constructor(public http: HttpClient) {
    console.log('Hello WordpressProvider Provider');
  }

  recibirEventos(){
    return this.http.get(this.baseUrl);
  }

}

El de mi home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { WordpressProvider } from './../../providers/wordpress/wordpress';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

datos
  constructor(public navCtrl: NavController,
              public http: HttpClient,
              public wordpress: WordpressProvider) {


    this.wordpress.recibirEventos().subscribe(data=>{
      this.datos = data;
      });

  }
}

y el del home.html

<ion-list>
<ion-item *ngFor="let item of datos">
{{item.id}}
</ion-item>
</ion-list>
1
  • puedes desplegar que retorna this.datos = data;
    – DavElsanto
    Commented el 23 jul. 2019 a las 13:57

1 respuesta 1

0

Habría que ver que tipo de dato está llegando a través de la petición get, que según el error no es un array u objeto iterable. Ésto se puede solucionar haciendo un console.log()

this.wordpress.recibirEventos().subscribe(data=>{
  this.datos = data;
  console.log(data);
  });

o usando un programa mas especifico como puede ser el Postman que te permite gestionar todo tipo de consulta y su respuesta.

Para evitar errores es recomendable gestionar el tipo de variable que vas a asignar, en éste caso, a la variable this.datos que tranquilamente podría ser declarada

export class HomePage {

public datos: any[];
...

y si puedes ser más específico en el tipo de dato mucho mejor (en lugar del any) además de que va a ser publica (public) pues la usaremos en el HTML para poblar el listado. Ahora si queremos hacer el objeto iterable desde tu servicio/proveedor puedes hacer lo siguiente

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class WordpressProvider {

baseUrl:string ="http://mipagina.com/wp-json/wp/v2/posts/9159";

  constructor(public http: HttpClient) {
    console.log('Hello WordpressProvider Provider');
  }

  recibirEventos(){
    return this.http.get(this.baseUrl).map(res => res.json());
  }

}

Me estoy basando en los siguiente problemas reportados en StackOverflow en Inglés y el foro de Ionic y espero que sea la solucion para tu problema

3
  • 1
    Tengo entendido que desde angular 4.3 ya no es necesario utilizar .map, ya que se implemento HttpClient que te devuelve el json. En todo caso a la hora de utilizar .map es necesario importar import 'rxjs/add/operator/map';. Respeto a lo que me dijiste he hecho un console.log(this.datos); y he visto que no tiene la propiedad symbol(symbol.itarator). No se si eso sea lo que me esta dando erros y en caso de ser eso tampoco tengo claro como solucionarlo. Commented el 5 nov. 2018 a las 8:41
  • no se si es mucha molestia, pero si pudieras editar el baseUrl y cambiar la pagina por mipagina (por ejemplo), es que se me paso el nombre. Un saludo Commented el 5 nov. 2018 a las 8:49
  • Podrías, entonces, dar referencia sobre que versión del framework estás usando? y claro ya lo edito.
    – Takatalvi
    Commented el 5 nov. 2018 a las 22:51

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