Angular http request with interface: statusText: "Unknown Error"

Question

I am trying to call an example API (https://jsonplaceholder.typicode.com/posts) in Angular via the use of an interface.

However I am getting the following error. ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

My code for my TS file is below

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

interface Post {
  title: string;
  body: string;
};

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


  constructor(public navCtrl: NavController, private http: HttpClient) {

  }

  ionViewDidLoad() {

    this.getData();

  }

  getData() {
    this.http.get<Post>('https://jsonplaceholder.typicode.com/posts').subscribe(res => {
      let postTitle = res.title;
      console.log(postTitle);
    });
  }

}

I tried your code and its working at my end. Only problem was that res returns array so it will be res[0].title. — Sujata Chanda
– Sujata Chanda, Commented Aug 6, 2018 at 7:31
thanks, though I need all the values of title so I guess a for loop is the only way — RRB
– RRB, Commented Aug 6, 2018 at 7:35

Arya11 · Accepted Answer · 2018-08-06 07:33:48Z

1

well, your code has a few problems for one res is of Array type and if you want to access your objects property you'll have to loop through it (perhaps something like this:)

let postTitle = [];
this.http.get<Post>('https://jsonplaceholder.typicode.com/posts').subscribe(res => {
  res.forEach(element => {
  postTitle.push(element);
});
  console.log(postTitle);
});

and I strongly recommend to call an API via a service don't do it in a component.

answered Aug 6, 2018 at 7:33

Arya11

5782 gold badges6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RRB Over a year ago

thanks, yes i will do that. I just wanted to try an interface in a test call

Nikhil Kapoor · Accepted Answer · 2018-08-06 07:36:43Z

1

So I tried to replicate this with https://stackblitz.com/edit/angular-njzmwr

I found an issue that, your current api is returning data as an array so either selects the data by the filter from array or something else. pls check the above-mentioned URL

answered Aug 6, 2018 at 7:36

Nikhil Kapoor

6171 gold badge5 silver badges16 bronze badges

Comments

PeS · Accepted Answer · 2018-08-06 07:35:01Z

0

The API returns and Array of PostS. Try:

getData() {
  this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts').subscribe(res => {
    let postTitle = res[0].title;
    console.log(postTitle);
  });
}

HTH

answered Aug 6, 2018 at 7:35

PeS

4,0474 gold badges46 silver badges57 bronze badges

Collectives™ on Stack Overflow

Angular http request with interface: statusText: "Unknown Error"

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related