Get value of HTTPClient in Angular

Question

data-sharing.service.ts

public httpGetAll(owner: any) {
    return this.http.get(`${this.url}/${owner}`, this.httpOptions).pipe(
      catchError(e => {
        throw new Error(e);
      })
    );
  }


public httpGetAllBy(id: number, byId:string, owner: any) {
    return this.httpGetAll(owner).subscribe(data => {
      Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
    })

station.service.ts

getStationsByOrg(id) {
    return this.dataSharing.httpGetAllBy(id, 'orgId', 'station');
  }

managestation.component.ts

getStationsByOrg(id) {
    this.sta = this.staService.getStationsByOrg(id);
  }

managestation.component.html

<ion-content class="body">
  <ion-button expand="block" (click)="onAddStation()">Add Station
    <ion-icon name='add' slot="end"></ion-icon>
  </ion-button>
  <ion-list>
    <ion-item *ngFor="let s of sta">
      <ion-label>{{ s.name }}</ion-label>
      <ion-label>{{ s.orgId }}</ion-label>
      <ion-icon name='create' slot="end" (click)="onEditStation(s.id)"></ion-icon>
      <ion-icon name='trash' slot="end" (click)="onDeleteStation(s.id)"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

Error

ERROR Error: "[object Object]" Angular 11 core.js:4002

How can I get the values of httpGetAllBy in managestation.component.ts and assign it to this.sta. ?

Dipten · Accepted Answer · 2019-12-13 14:07:45Z

1

Modify your files as below

data-sharing.service.ts

public httpGetAllBy(id: number, byId:string, owner: any) {
    return new Promise((resolve, reject) => {
     this.httpGetAll(owner)
      .subscribe(data => {
        let filterdData = Object.keys(data).map(function(key) {
         return data[key].filter(x => x[byId] === id);
        });
        resolve(filterdData);
      })
    });
}

managestation.component.ts

getStationsByOrg(id) {
    this.staService.getStationsByOrg(id)
    .then((allData) => {
       this.sta = allData;
    })

  }

edited Dec 13, 2019 at 14:07

answered Dec 13, 2019 at 13:50

Dipten

1,08211 silver badges19 bronze badges

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

3 Comments

Dominion Over a year ago

I have the following getStationsByOrg() getUsersByOrg() getUsersByStation() getTanksByStation() getPumpsByStation() getPumpsByTank() so i want to make httpGetAllBy() have the filter function so i dont have to repeat it in all the function above

Dipten Over a year ago

Modified answer using Promise way. Please check again.

Dominion Over a year ago

ERROR in src/app/members/managestation/managestation.component.ts(65,10): error TS2739: Type '{}' is missing the following properties from type 'Station': id, name, orgId, status it working using console.log(allData); but get the error above in this.sta = allData;

Дмитрий Шахно · Accepted Answer · 2019-12-13 13:55:00Z

You are returning subscription, but not data. Options:

2) return observable itself:

public httpGetAllBy(id: number, byId:string, owner: any) {
    return this.httpGetAll(owner);
}
getStationsByOrg(id) {
    return this.dataSharing.httpGetAllBy(id, 'orgId', 'station').subscribe(data=>{
      const var = Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
//your logic in station.service.ts
};
  }

2) use async/await to get data:

public async httpGetAllBy(id: number, byId:string, owner: any) {
    return await this.httpGetAll(owner).toPromise().then(data => {
      return Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
    })
getStationsByOrg(id) {
    return this.dataSharing.httpGetAllBy(id, 'orgId', 'station').then(data=>{
//your logic in station.service.ts
};

spnq · Accepted Answer · 2019-12-13 13:56:15Z

0

You should return an Observable in your service and map it through pipe().

public httpGetAllBy(id: number, byId:string, owner: any) {
    return this.httpGetAll(owner).pipe(
        map( (data => {
            Object.keys(data).map(function(key) {
                return data[key].filter(x => x[byId] === id);
            });
        }))
    );
}

Then you can subscribe to in your component.

edited Dec 13, 2019 at 13:56

answered Dec 13, 2019 at 13:50

spnq

314 bronze badges

2 Comments

Dominion Over a year ago

ERROR in src/app/_services/data-sharing.service.ts(177,9): error TS2552: Cannot find name 'map'. Did you mean 'Map'?

spnq Over a year ago

No, you should import it from RxJS

Collectives™ on Stack Overflow

Get value of HTTPClient in Angular

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related