Saving data in angular 8 with subscribe

Question

Hello I have a problem with saving data in subscribe with angular 8.

when i make this this.service.getAll().subscribe(response => console.log(this.itemList = response))

and print itemList the array is empty, i try to print the response in the subscribe and response have data.

I tried to make print in subscribe and print of local array in this way :

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ItemService } from 'src/service/item.service';
import { Item } from 'src/DTO/item';

@Component({
  selector: 'app-crafting-dashboard',
  templateUrl: './crafting-dashboard.component.html',
  styleUrls: ['./crafting-dashboard.component.css']
})
export class CraftingDashboardComponent implements OnInit{
  itemList: Item[] = [];

  constructor(private router: Router, protected service: ItemService) {
  }

  ngOnInit() {
    this.service.getAll().subscribe(response => console.log("Reponse:" + response));
    console.log("Constrol print" + this.itemList);
  }

  getAll(){

  }

}

i've noted that in console appear first the console.log("Constrol print" + this.itemList); and after the print of subscribe. It could be this the problem?!?!?

this is my service (i made an abstract service and in the specific service I add the specific method for an entity:

import { Service } from './service';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

export class AbstractService<DTO> implements Service<DTO> {
    type: string = '';
    port: string = '8080';

    constructor(protected http: HttpClient){}

    getAll(): Observable<DTO[]> {
        return this.http.get<DTO[]>('http://localhost:' + this.port + '/' + this.type + '/getAll');
    }

    read(id: number): Observable<DTO> {
        return this.http.get<DTO>('http://localhost:' + this.port + '/' + this.type + '/read?id=' + id);
    }

    insert(dto: DTO): Observable<DTO> {
        return this.http.post<DTO>('http://localhost:' + this.port + '/' + this.type + '/insert', dto);
    }

    update(dto: DTO): Observable<DTO> {
        return this.http.put<DTO>('http://localhost:' + this.port + '/' + this.type + '/update', dto);
    }

    delete(id: number): Observable<any> {
        return this.http.delete('http://localhost:' + this.port + '/' + this.type + '/delete?id=' + id);
    }


}

The back-end is written in java with spring

*It could be this the problem?!?!?*: of course it is. If the service could return your data synchronously, it wouldn't bother you with an observable. It would return an array of data directly. The whole point of observables is to handle asynchrony. The A in AJAX means *asynchronous*. You sent a request, then do something else. And much later, when the response is finally available, the subscribe callback is called with the response. — JB Nizet, Jan 05 '20 at 18:15
exixst a method to wait response e after execute all other action? — Vanno, Jan 05 '20 at 18:17
No. You subscribe, and do what you need to do with the response from inside the callback passed to subscribe. — JB Nizet, Jan 05 '20 at 19:09

score 0 · Answer 1 · answered Jan 05 '20 at 19:27

In this code:

ngOnInit() {
    this.service.getAll().subscribe(response => console.log("Reponse:" + response));
    console.log("Constrol print" + this.itemList);
}

The callback response => console.log("Reponse:" + response) is delayed, it executes when receiving the HTTP response. This explains the behavior you observed ("Constrol print" being shown before "Reponse:").

If you have to do something with the data you receive, do it in the callback, and not in ngOnInit:

this.service.getAll().subscribe(response => {
    console.log("Reponse:" + response);
    //Whatever you want to do with the response and the variables assigned to the response goes here
});

score 0 · Answer 2 · answered Jan 05 '20 at 19:41

0

Do like this

this.service.getAll().subscribe(response => {
    this.itemList=response;
    console.log("Console print" + this.itemList);
});

answered Jan 05 '20 at 19:41

Binara Thambugala

776
6
17

Saving data in angular 8 with subscribe

2 Answers2