How to retrieve the HTTPClient value in Angular?

Question

How to retrieve the HTTPClient value in Angular?

APIservice.ts

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


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

station.service.ts

getStationsByOrganizationID(id) {
    return this.APIservice.fetchDataById(id, 'orgId', 'station');
  }

managestation.component.ts

getStationsByOrgID(id) {
    this.sta = this.stationService.getStationsByOrganizationID(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 do I retrieve the values of fetchDataById in managestation.component.ts and set it to this.sta?

angular typescript ionic-framework

Answer 1

Answer №1

Adjust your files as directed below

data-service.service.ts

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

managestation.component.ts

retrieveStationsByOrganization(id) {
    this.stationService.getStationsByOrg(id)
    .then((allData) => {
       this.stations = allData;
    })

  }

Answer 2

Adjust your files as directed below

data-service.service.ts

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

managestation.component.ts

retrieveStationsByOrganization(id) {
    this.stationService.getStationsByOrg(id)
    .then((allData) => {
       this.stations = allData;
    })

  }

Answer 3

Answer №2

When it comes to returning subscriptions, here are a couple of options:

Option 1: Return the 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 newData = Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
//implement your logic in station.service.ts
};

Option 2: Utilize async/await for fetching 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=>{
//implement your logic in station.service.ts
};

Answer 4

When it comes to returning subscriptions, here are a couple of options:

Option 1: Return the 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 newData = Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
//implement your logic in station.service.ts
};

Option 2: Utilize async/await for fetching 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=>{
//implement your logic in station.service.ts
};

Answer 5

Answer №3

To enhance your service functionality, it is advisable to use Observables and apply mapping through the pipe method.

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

You can then subscribe to this in your component for further processing.

Answer 6

To enhance your service functionality, it is advisable to use Observables and apply mapping through the pipe method.

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

You can then subscribe to this in your component for further processing.

How to retrieve the HTTPClient value in Angular?

Answer №1

Answer №2

Answer №3

Similar questions

I prefer not to run the next.js SWR until after the initial rendering

What is the process for importing a JSON5 file in Typescript, just like you would with a regular JSON file?

Utilize a single component across various instances for enhanced efficiency

Angular component linked to a dynamic object requiring user confirmation before changing or reverting to the original value

Changing the type of an object's property in TypeScript on the fly

Is it recommended for TypeScript to automatically resolve the index.ts file as the default module file?

Comparing Angular 2 Components and AngularJS Directives: What Sets

How do I implement branch code using TypeScript types in Svelte?

Is there a way to create a new perspective for Ion-Popover?

Automatic Form Saving in Angular 4

Transforming functions into a new typed object with different function signatures

Upgrading to Angular 14 has caused issues with component testing that involves injecting MAT_DIALOG_DATA

The situation I find myself in frequently is that the Angular component Input

Exploiting CORS in Angularjs IONIC

Exploring data retrieval from nested arrays of objects in TypeScript/Angular

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

Removing sourceMappingURL from an Angular Universal build: A step-by-step guide

The function RegisterOnChange is not a valid function

Is there a way to access the Angular directive instance from the console?

Transform array of elements from type T1 to element in the array to type T2