HttpErrorResponse in Ionic Angular

Question

I'm trying to work with Ionic (first attempt) and somehow I'm not able to get my data in my view

Code

Service (posts.service.ts)

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


@Injectable({
  providedIn: 'root'
})
export class PostsService {

  apiUrl = 'https://example.com/api/posts/';
  url: any;

  constructor(private http: HttpClient) { }

  getPosts(): Observable<any> {
    return this.http.get(`${this.apiUrl}`).pipe(
      map(posts => posts)
    );
  }

  getDetails(url) {
    return this.http.get(`${this.url}?i=${url}&plot=full`);
  }
}

Controller (posts.page.ts)

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PostsService } from './../../services/posts.service';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.page.html',
  styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {

  posts: Observable<any>;

  constructor(private postsService: PostsService) {}

  ngOnInit() {
  }

}

view (posts.page.html)

<ion-list>
  <ion-item *ngFor="let post of posts">
    <div slot="start"></div>
    <img [src]="post.image" />
    {{post.title}}
    <div class="item-note" slot="end">
      {{post.body}}
    </div>
  </ion-item>
</ion-list>

Output

Live API

My APP

Any idea where I did mistake?

When do you assign `posts` in your controller to the service response? — Jojofoulk, May 23 '19 at 01:32
@Jojofoulk `PostsService` in `constructor` i think?! this is my first attempt with this framework i followed a tutorial no have idea what's what exactly :) — mafortis, May 23 '19 at 01:37
You need to call your `getPosts()` in the controller and set the `posts` in your controller to the response of `postsService.getPosts()`. Something like: `this.postsService.getPosts().subscribe(res=>this.posts=res.data)` — Jojofoulk, May 23 '19 at 01:41

score 0 · Answer 1 · answered May 23 '19 at 01:35

0

You need to call getPosts() on your controller.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { PostsService } from './../../services/posts.service';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.page.html',
  styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {

  posts: Observable<any>;

  constructor(private postsService: PostsService) {}

  ngOnInit() {
      this.posts = this.postsService.getPosts();
  }

}

In your html you also need to specify that is async

<ion-item *ngFor="let post of posts | async">

answered May 23 '19 at 01:35

vladwoguer

951
1
14
28

I get this error in console `message: "Http failure response for https://example.com/api/posts/: 0 Unknown Error" name: "HttpErrorResponse"` – mafortis May 23 '19 at 01:39
This url `https://example.com/api/posts/` does't returns data. Is this the url you trying to reach? – vladwoguer May 23 '19 at 01:42
You probably changed the original url to post your question replace `https://example.com/api/posts/` with your original url. – vladwoguer May 23 '19 at 01:44
i know that i am using my real url in services file. for here i just changed my real url to example – mafortis May 23 '19 at 01:45
Check if this (https://stackoverflow.com/questions/47180634/i-get-http-failure-response-for-unknown-url-0-unknown-error-instead-of-actu) is related, looks like a CORS problem – vladwoguer May 23 '19 at 01:48

score 0 · Answer 2 · answered May 23 '19 at 01:36

0

You should subscribe the observable to get the result. Observables are Lazy , unless you subscribe , it wont initiate the call.You can use angular async pipe which will automatically subscribe and unsubscribe for you

 <ion-item *ngFor="let post of getPosts() | async">
    <div slot="start"></div>
    <img [src]="post.image" />
    {{post.title}}
    <div class="item-note" slot="end">
      {{post.body}}
    </div>
  </ion-item>

or you can subscribe the from the component itself.

    posts:any;
    ngOnInit() {
    this.poseService.getPosts().suscribe((res)=>{
      this.posts=res;
    })
    }
 <ion-item *ngFor="let post of posts">

answered May 23 '19 at 01:36

Jameel Moideen

7,542
12
51
79

it returns `ERROR TypeError: "_co.getPosts is not a function"` – mafortis May 23 '19 at 01:40
@mafortis change your map like map(posts => posts.data) – Jameel Moideen May 23 '19 at 01:42
I get this error in console `message: "Http failure response for https://example.com/api/posts/: 0 Unknown Error" name: "HttpErrorResponse"` – mafortis May 23 '19 at 01:48

score 0 · Accepted Answer · answered May 26 '19 at 04:58

0

SOLVED

Please refer to my other question which solved this problem.

Ionic can't get open cors

answered May 26 '19 at 04:58

mafortis

6,750
23
130
288

HttpErrorResponse in Ionic Angular

Code

Output

3 Answers3

SOLVED