HttpClient returns json once and then returns undefined

Question

I am reading the contents of a JSON from a server using HttpClient. I am able to read the contents once successfully but when I read it a second time it always returns undefined.

This is what my .ts looks like:

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

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

  constructor(private httpService: HttpClient) { }

  getData() {
    this.httpService.get('https://raw.githubusercontent.com/LearnWebCode/json-example/master/animals-1.json').subscribe(
          result => { 
            console.log(result)
          }
    )
  }

   ngOnInit() {
     this.getData()
     setInterval(this.getData, 10000)
   }
}

HttpClient is imported into app.module.ts correctly as the first time I read the JSON it works without a problem.

Here is a stackBlitz with the issue.

I am using setInterval because I want to be able to keep reading the JSON as the values will update. Am I meant to be closing the httpClient.get request so that I can make another.

I have seen other questions where the request always returns undefined but mine only returns undefined on and after the second request.

How do I successfully get the contents of the JSON each time I send the get request?

EDIT Apparently for some my stackblitz works not a problem, here is a screenshot from the stackblitz of the console with the issue:

Possible duplicate of [Why is setInterval in an Angular service only firing one time?](https://stackoverflow.com/questions/43908009/why-is-setinterval-in-an-angular-service-only-firing-one-time) — Dino, Jul 17 '19 at 07:15
@Dino Not a duplicate as the `setinterval` is firing correctly. Please have a look at the linked StackBlitz before flagging. — JackU, Jul 17 '19 at 07:19
Your stackblitz works fine, and yes this is a duplicate. The answers you got are the same ones as in that post I referenced. Please check it again — Dino, Jul 17 '19 at 07:26

score 5 · Accepted Answer · answered Jul 17 '19 at 07:18

5

this in the function given to setInterval doesn't point to the class when it is called.

Use arrow function instead.

    setInterval(() => { this.getData(); }, 10000);

answered Jul 17 '19 at 07:18

pajtim

537
2
8

1

In stackblitz I do not get the error anymore after refreshing the preview page. It seems like the process is still running in the background even after changing the code. – pajtim Jul 17 '19 at 07:27

score 1 · Answer 2 · edited Jul 17 '19 at 07:33

1

You have used this.getData, it should be this.getData() and you have to use an arrow function.

Try this:

setInterval(() => this.getData(), 10000);

edited Jul 17 '19 at 07:33

Prashant Pimpale

10,349
9
44
84

answered Jul 17 '19 at 07:20

Adrita Sharma

21,581
10
69
79

I still get: `Cannot read property 'get' of undefined` occasionally. Why would this be? I have increased the interval and still get this? – JackU Jul 17 '19 at 07:24

score 0 · Answer 3 · answered Jul 17 '19 at 08:01

Use of arrow function is a great response but you should be careful when using setInterval. You should definitely prefer usage of RxJS in an Angular application context :

interval(10000).pipe(
   mergeMap(() => this.getData())
).subscribe()

Bad practices usage of setInterval : https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9

HttpClient returns json once and then returns undefined

3 Answers3