Pulling data from website with angular 6 get requests

Question

I'm trying to pull JSON files from the web and I am doing something wrong. Here is my code:

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

import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class PullanaliticsService {
  theUrl: string = 'https://jsonplaceholder.typicode.com/post';
  res = [];
  private httpClient: HttpClient;
  constructor() { }


  httpGetAsync()
  {
      var t = this.httpClient.get(this.theUrl).subscribe((res) => {
        console.log(res);
      });

      return t

}

(I changed this.theUrl to a page everyone can view)

I am getting the error:

DashboardComponent.html:4 ERROR TypeError: Cannot read property 'get' of undefined
    at `PullanaliticsService.push../src/app/pullanalitics.service.ts.PullanaliticsService.httpGetAsync (pullanalitics.service.ts:22)`

which sounds like the URL is not working but I cannot figure out why.

That's not telling you the URL isn't working, it's telling you that you haven't correctly injected the `HttpClient` into your service. Read the docs: https://angular.io/guide/http. — jonrsharpe, Jun 20 '18 at 15:41
You could tell from the dev tools network tab that the network request isn't even being attempted here. @jonrsharpe is correct in saying that in this particular error it doesn't matter whether the url is returning data. — Chris Farmer, Jun 20 '18 at 15:48

score 3 · Accepted Answer · answered Jun 20 '18 at 15:40

3

Here you have to initialize the http in your constructor as follows :

constructor(private httpClient: HttpClient) { }

answered Jun 20 '18 at 15:40

eduPeeth

1,840
13
21

Why would that make a difforence – Vladimir_314159 Jun 20 '18 at 15:41
2

@Vladimir_314159 because otherwise, *as you're seeing*, it's not actually being injected by Angular's DI system and is therefore undefined at runtime. Currently you just have an uninitialised private property, and Angular only automatically provides constructor injection. – jonrsharpe Jun 20 '18 at 15:42
@edupeeth thanks but after fix still throwing the same exact error. – Vladimir_314159 Jun 20 '18 at 15:54
It seems surprising that the same error is showing up if you've followed this suggestion. Maybe create a stackblitz to demo the problem? – Chris Farmer Jun 20 '18 at 15:58
I had the same problem in the other file thats why fixed now thanks so much – Vladimir_314159 Jun 20 '18 at 16:05

score 1 · Answer 2 · answered Jun 20 '18 at 15:42

Your service should have the httpClient injected into it. You declare it, but you never set its value in your code. You can let angular set that value for you by supplying the http client in the constructor.

@Injectable({
  providedIn: 'root'
})
export class PullanaliticsService {
  theUrl: string = 'https://jsonplaceholder.typicode.com/post';
  res = [];
  constructor(private httpClient: HttpClient) { }


  httpGetAsync() {
      return this.httpClient.get(this.theUrl);
  }
}

Letting angular do that in the constructor is just a shortcut for:

export class PullanaliticsService {
  private httpClient: HttpClient;
  constructor(_httpClient: HttpClient) {
    this.httpClient = _httpClient;
  }
}

The behaviour you describe at the end is *still* letting Angular inject it, that's TypeScript syntax ("parameter property" shorthand) not an Angular feature. — jonrsharpe, Jun 20 '18 at 15:50
That is true. I intended that the focus be on the fact that angular was the thing doing the injecting. — Chris Farmer, Jun 20 '18 at 15:55

Pulling data from website with angular 6 get requests

2 Answers2