CODEWITHSUNDEEP
angulartypescript
Chin
Chin

Reputation: 63

Angular observable to array instead of subscriber

I want to utilize the data from API instead of just printing it out. By using code snippets below, I can show the output from API in console.

(4) [{…}, {…}, {…}, {…}]
0
: 
{Time: 'Dec 14 2022  5:56PM', Moves: 23376089}
1
: 
{Time: 'Dec 15 2022 12:02PM', Moves: 23139660}
2
: 
{Time: 'Dec 14 2022 11:54PM', Moves: 23334252}
3
: 
{Time: 'Dec 15 2022  6:22AM', Moves: 23113578}
length
: 
4
[[Prototype]]
: 
Array(0)

database.service.ts

public getMoves(): Observable<any[]> {
    this.moves$ = this.http.get<any[]>('http://localhost:5000/api/moves');
    return this.moves$;
  }

app.component.ts

ngOnInit(): void {
    this.output = this.getMoves()
    console.log(this.output)
 
  }
getMoves() {
     return this.DataService.getMoves().subscribe((response) => {
       this.moves = response
       console.log(this.moves)
     }
       )
   }

However, when I try to print out this.moves in ngOnInit, all I get is in output below in console

SafeSubscriber {initialTeardown: undefined, closed: false, _parentage: null, _finalizers: Array(1), isStopped: false, …}
closed
: 
true
destination
: 
null
initialTeardown
: 
undefined
isStopped
: 
true
_finalizers
: 
null
_parentage
: 
null
[[Prototype]]
: 
Subscriber

How can I save moves response into an array instead of subscriber which I can use as Highchart input later?

Upvotes: 2

Views: 280

Answers (3)

Mahammed Javid
Mahammed Javid

Reputation: 1

Try this one. getMoves() function will run once app initialized, and the data will be stored in 'output' variable.

output:any
ngOnInit(): void {
   this.getMoves()
}

getMoves() {
   return this.DataService.getMoves().subscribe((response) => {
       this.output = response
       console.log(this.output)
    })
}

Upvotes: 0

kellermat
kellermat

Reputation: 4535

If I understand you correctly, you want to fetch the moves from the backend, assign them to a local variable and print them to the console. You could achieve this with the following lines of code:

ngOnInit(): void {
    this.DataService.getMoves().subscribe(response => {
        this.moves = response;
        console.log(this.moves);
    });
}

Upvotes: 1

Михаил Дулик
Михаил Дулик

Reputation: 1

Try this

  ngOnInit(): void {
    this.getMoves().subscribe(response => {
      this.output = this.getMoves();
      console.log(this.output);
    });
  }
  getMoves() {
    return this.DataService.getMoves().pipe(
      tap(response => {
        this.moves = response;
        console.log(this.moves);
      }),
    );
  }

Upvotes: 0

Related Questions