1

tengo un problema con angular 5. He encontrado alguna pregunta parecida pero no he conseguido solucionar nada. La cosa es que tengo un servicio http que estoy consumiendo desde angular con una petición get, la cual me devuelve un Json. Lo que me pasa es que no consigo mostrar esta información por pantalla.

Este seria el metodo que hace la llamada al servicio:

getPosts(): Observable<Post[]>{
  const httpOptions = {
    withCredentials: true 
  };
return this.http.get<Post[]> (url, httpOptions);
}

La clase Post:

export class Post {
  constructor(
    public error: string, 
    public mensaje: string,
    public datos: string
  ) {}
}

La llamada al método:

allPosts: Post[] = [];

constructor( private http:HttpClient, private postService: PostService){ 
  this.postService.getPosts().subscribe(posts =>{
    this.allPosts = posts;
    console.log(posts);

  });
} 

Código Html: Es en esta parte donde tengo el problema ya que si en el html pongo:

{{allPosts| json}}

Me aparece todo el JSon en la pantalla. Pero si intento coger la información por separado consigo un null o un error. He probado con lo siguiente:

<div *ngFor="let posts of allPosts">    
  <h1>{{posts.mensaje}}</h1>
  <p>{{posts.error}}</p>
</div> 

Error:

'Cannot read property 'mensaje' of undefined'

Esto me da el error de arriba, pero si le añado un signo de interrogación '?'

{{posts?.mensaje}}

No me aparece ningún error pero en pantalla obtengo un null.

No se si me habré explicado muy bien, la cosas es que soy nuevo en esto de angular y ando un poco perdido...

El Json devuelve lo siguiente:

{"error":"0","mensaje":"","datos":{"versionesOperativas":["1.0","2.0"],"servidores":{"mc18608":"1524343965"}}}
6
  • ¿Puedes poner el JSON que se te muestra? Commented el 25 abr. 2018 a las 11:14
  • 1
    Estás seguro que el json es un array y no un objeto? Si es un objeto probablemente sería mejor convertirlo en un array usando Object.entries
    – ffflabs
    Commented el 25 abr. 2018 a las 11:15
  • @amenadiel Creo que hemos llegado a la misma conclusión Commented el 25 abr. 2018 a las 11:16
  • A mí me pasa muy seguido en Angular y en Vue (recomiendo el segundo a rabiar) así que me hice helpers para casos genéricos
    – ffflabs
    Commented el 25 abr. 2018 a las 11:17
  • @PabloLozano Acabo de añadir el JSon. Gracias
    – Boortx
    Commented el 25 abr. 2018 a las 11:18

2 respuestas 2

1

La respuesta de tus posts no es un array sino un objeto (un solo post y no un array de posts).

No puedes iterar con un *ngFor sobre algo que no es iterable, y un objeto por definición no lo es.

Puedes chequear si una variable es un array haciendo:

if(posts.constructor === Array) { ... }

Y si eso es false entonces poner

this.allPosts=[posts];
4
  • Creo que con instanceof quedaba más claro y es más seguro Commented el 25 abr. 2018 a las 11:34
  • ¿Por qué es más seguro? En todo caso, para múltiples comparaciones (o un proceso repetitivo), hay que tener en cuenta que instanceof es un 75% más lento (vale decir, constructor es 4 veces más rápido) jsperf.com/instanceof-array-vs-array-isarray/33
    – ffflabs
    Commented el 25 abr. 2018 a las 14:38
  • Estaba pensando en el caso de que extiendas la clase Array: si tienes class Custom extends Array {...}, el constructor sería Custom pero instanceof Array aún devolvería true... aunque es un caso que no se daría aquí, un JSON nunca generaría algo así Commented el 25 abr. 2018 a las 14:43
  • Tienes razón. Aunque extender los primitivos hace faltar mi eslint hasta las nubes
    – ffflabs
    Commented el 25 abr. 2018 a las 17:24
0

creo que lo que te falta es un pipe en la llamada http.

No soy un experto en angular, pero yo los servicios, siempre los hago igual, y no suelo tener problemas. Te pongo un ejemplo:

--Servicio

getPosts(): Observable<Post[]> {

    let posts: Post[] = [];

    const httpOptions = {
        withCredentials: true
    };
    return this.httpClient.get(url, httpOptions).pipe(
        map( postList => {
            for (let i in postList) {
                let post = new Post(postList[i].error, postList[i].mensaje, postList[i].datos);
                posts.push(post);
            }
            return posts;
        })
    );
}

Y despues lo consumes como lo tenías, yo creo que te debería funcionar.

Un saludo.

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.