Angular http get does nothing

Question

I'm following tutorial on Udemy and I can't workout how to use HTTP GET in Angular. I've created component called posts, here is code of posts.component.ts:

import { Http } from '@angular/http';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  posts: any[];

  constructor(http: Http) {
    http.get('http://jsonplaceholder.typicode.com/posts')
    .subscribe( response => {
      this.posts = response.json();
    });
   }

  ngOnInit() {
  }
}

And there is posts.component.html

<ul class="list-group">
  <li
  *ngFor="let post of posts"
  class="list-group-item">
  {{post.title}}
</li>
</ul>

I've also imported HttpModule in app.module.ts, but i cannot se any resoults, my site on localhost:4200 is the same as it was before I've added "posts". Also there isn't any error while I'm compiling or in web browser console. This is what is in my web browser console:

DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

This is a very old angular version. You are better of spending time in the official documentation and guides on angular.io. There is also nothing particularly wrong with your code. It should work like you showed, so there is some missing information on your end. You should determine if the request is really made, and if so, if response.json() returns what you expect. — Poul Kruijt
– Poul Kruijt, Commented May 3, 2020 at 18:35

Sandman · Accepted Answer · 2020-05-03 19:55:35Z

1

Do not use the old module for http requests:

import { Http } from '@angular/http';

Use the new module instead:

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

Here an example: https://stackblitz.com/edit/angular-http-client-first-example?file=src/app/app.component.ts

Edit: Use this version:

  constructor(
      private readonly _http: HttpClient) {
    this.getPosts().subscribe(res => {
      this.posts = res;
    });
  }

  getPosts(): Observable<any[]> {
    console.log('getPosts');
    return this._http.get('https://jsonplaceholder.typicode.com/todos').pipe(
        map<any, any[]>(response => {
            console.log(response);
            return response;
          })
      );
  }

edited May 3, 2020 at 19:55

answered May 3, 2020 at 19:07

Sandman

1,57910 silver badges23 bronze badges

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

4 Comments

budyb Over a year ago

Thank you, but I've copied code from example to my project and still I can't see anything on site nor in the console in web browser.

Sandman Over a year ago

Are you talking about my example? Do you have console errors? Are you sure you've imported the new module into app.module.ts? imports: [HttpClientModule],

budyb Over a year ago

My bad, I got confused. Can you explain to me why there is http.get in both hello.component and app.component? I don't understand what http.get in app.component is doing.

Sandman Over a year ago

Don't consider "hello.component". It was my first attempt. I remove it from the example. I also modify the answer by inserting the piece of code to consider.

Collectives™ on Stack Overflow

Angular http get does nothing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related