I am learning Angular 4 HTTP online and I am practicing in angular 7 so that is why I am getting this error I think

Question

@Component({
  selector: 'posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent  {
posts : any[];
  constructor(http : HttpClient) {
    http.get('https://jsonplaceholder.typicode.com/posts/1')
    .subscribe(response => {
      this.posts = response.json();
    });
    }

   }

error : Property 'json' does not exist on type 'Object'.

I am learning Angular 4 online and practicing in Angular 7 and that is why I am getting this error I think Please help me to get rid of this error for me to move forward my course.

Please edit the title. Titles should be a digest of the question and not part of it. Read [how to ask](https://stackoverflow.com/help/how-to-ask) — Christian Vincenzo Traina, Mar 17 '20 at 16:26
Does this answer your question? [Property 'json' does not exist on type 'Object'](https://stackoverflow.com/questions/46005430/property-json-does-not-exist-on-type-object) — John Montgomery, Mar 18 '20 at 18:02

Evaldas Buinauskas · Answer 1 · 2020-03-24T14:08:45.057

Angular 4 used @angular/http which as HttpModule package to fetch data, newer versions use @angular/common/http which has HttpClientModule.

HttpClient already fetches data in JSON format, so you don't really need .json() method because your response is already a json.

@Component({
  selector: "posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.css"]
})
export class PostsComponent {
  posts: any[];
  constructor(http: HttpClient) {
    http
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .subscribe(response => {
        this.posts = response;
      });
  }
}

Also for the future, it's better to use constructor to only inject dependencies and use OnInit lifecycle to fetch data from APIs

@Component({
  selector: "posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.css"]
})
export class PostsComponent implements OnInit {
  posts: any[];
  constructor(private readonly http: HttpClient) {}

  ngOnInit() {
    this.http
      .get("https://jsonplaceholder.typicode.com/posts/1")
      .subscribe(response => {
        this.posts = response;
      });
  }
}

Based on post type brought from json placeholder, this is a correct approach:

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

@Component({
  selector: "posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.css"]
})
export class PostsComponent implements OnInit {
  post: Post;
  constructor(private readonly http: HttpClient) {}

  ngOnInit() {
    this.http
      .get<Post>("https://jsonplaceholder.typicode.com/posts/1")
      .subscribe(response => {
        this.post = response;
      });
  }
}

Update. Have added Stackblitz example.

I am getting this error for the above code . The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more. — Josey, Mar 18 '20 at 13:35
Ye, so if you open https://jsonplaceholder.typicode.com/posts/1 it brings back a single object, not multiple ones. So `any[]` won't work. Let me update my answer — Evaldas Buinauskas, Mar 18 '20 at 14:05
I am neither getting an error nor output so can you say what you have did in app-html code because I am not sure where I am wrong — Josey, Mar 24 '20 at 06:19
@Josey I've added working Stackblitz example, it is slightly more advanced - it uses async pipes to subscribe to observables (this is best practice). Also demonstrates how to separate dumb (depending on only on input) components from the ones that fetch data from outer world. — Evaldas Buinauskas, Mar 24 '20 at 14:10

I am learning Angular 4 HTTP online and I am practicing in angular 7 so that is why I am getting this error I think

1 Answers1