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

Activate the mat-select selectionChange trigger when making changes to the form via patchValue

Building applications for platform iOS is not supported on this operating system

Utilize React to transform PDF files into PNG images and seamlessly upload them to Cloudinary

The marker is not updating in real-time with the actual latitude and longitude on the Google Maps angular

Angular, perplexed by the output displayed in the console

Issues with React Material UI Select functionality not performing as expected

Encountered an issue while trying to access a property that is undefined in the

Adding extra information to a property or array in Firebase

The debounced function in a React component not triggering as expected

Adding FormControl dynamically to FormGroup can be achieved by simply using the appropriate method

Introducing the Angular 2/4 Dashboard Widget Module!

Issue with dependency injection in Angular 16 when used as a standalone feature

Unresolved (waiting for response) unidentified

Error encountered while running `ionic build android`. To view the stack trace, try running the command with the `--stacktrace` option

The Angular text is not separating the rows with space

Determine to which observable in the list the error corresponds

Exploring the various methods of setting up a Create React App project with TypeScript

A step-by-step guide on integrating Detox with jest (ts-jest) and Typescript in a react-native app

Utilizing Angular's intelligent dichotomy of (container) and (presentational) components, integrating conditional logic, and effectively passing inputs throughout the

What is the reason behind typescript making it necessary for me to find a way to set a value of type