Angular : can't get data from url using HttpClientModule

Question

In my app, my objective is to fetch data from this URL below and display it in my app. https://jsonplaceholder.typicode.com/posts/1

My problem is data is not showing in my app, Console says something that i don't understand where to correct.

firefox console (ctrl+shift+k)

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:40471

[WDS] Live Reloading enabled. client:52

ERROR Error: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
    Angular 21
    RxJS 5
    Angular 9
core.js:5882:19

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  readonly ROOT_URL = 'https://jsonplaceholder.typicode.com';
  posts: any;
  constructor(private http: HttpClient) {

  }
  getPosts() {

     this.posts = this.http.get(this.ROOT_URL + '/posts/1');
  }
}

**app.component.html**

<h1>Angular HTTP Basic</h1>

<button (click)="getPosts()"> get</button>

<div *ngFor = "let post of posts">
  {{ post | json }}
</div>

This should be a simple work, but vs code didn't give me any error and i don't get it what my browser console means. Please point out what went wrong.

The ngFor only works with arrays, you response data is an object, change it to array, That's what the error means. — Sameer
– Sameer, Commented Mar 14, 2020 at 4:35

bjdose · Accepted Answer · 2020-03-14 04:43:06Z

1

You need to subscribe to your observable:

  posts: any[] = [];

  getPosts() {
     this.http.get(this.ROOT_URL + '/posts/1').subscribe((post) => {
       this.posts = [post];
     });
  }

Or you can use the power of observables and angular together:

  import { map } from 'rxjs/operators';
  import { Observable } from 'rxjs';

  posts: Observable<any[]>;

  getPosts() {
     this.posts = this.http.get(this.ROOT_URL + '/posts/1').pipe(
       map((post) => [post])
     );
  }

<div *ngFor = "let post of posts | async">
  {{ post | json }}
</div>

edited Mar 14, 2020 at 4:43

answered Mar 14, 2020 at 4:36

bjdose

1,3099 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Angular : can't get data from url using HttpClientModule

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related