I'm currently facing challenges in manipulating the elements obtained from a GET request.
The application I'm working on is constructed using the IonicSuper starter template and relies on the REST API handler included in that template.
I seem to be struggling with comprehending the type of the returned result and how I can effectively manipulate it. Admittedly, my experience with app development, especially TypeScript and its derivatives, is limited. However, I am aware that RxJS offers an Observable data type which facilitates various operations on the resultant data. Unfortunately, these operations do not seem to work when utilizing the mentioned API handler.
I have scoured multiple sources for solutions, but none of them proved to be suitable. Everywhere I looked, the basic Angular HttpClient was used alongside the RxJS Observable. Given that I am using the IonicSuper template, I intend to utilize the provided REST API handler. Regrettably, I'm unable to extract the necessary information from its code and documentation.
My objective is to retrieve a single object (or alternatively: an array containing just one object) from a collection of objects, identified by a particular id. Below are the pertinent excerpts from my provider.ts:
import { Injectable } from '@angular/core';
import { Api } from '../api/api';
import 'rxjs/add/operator/filter';
import { tPrediction } from '../../models/prediction';
@Injectable()
export class Prediction {
//API endpoint: Predictions
private epPredictions = 'predictions';
constructor(private api: Api) { }
getPrediction(id: number) {
let seq = this.api
.get(this.epPredictions)
// .flatMap((response) => response.json())
.filter(prediction => prediction.id == id)
.share();
seq.subscribe((res: any) => {
console.debug('prediction id', id);
console.debug('res', res);
}, err => {
this.handleError(err);
});
return seq;
}
}
Now, both flatMap() and filter() trigger the TypeScript error
Property '(flatMap|filter)' does not exist on type 'Observable<ArrayBuffer>'.This is where I'm perplexed: My understanding is that http.get() yields an Observable and should support these operators. Evidently, that's not the case.
I also attempted using a function, akin to the approach outlined in the RxJS documentation:
let seq = this.api
.get(this.epPredictions)
// .flatMap((response) => response.json())
.filter(function(prediction, idx) {
console.debug('getPrediction id', id);
console.debug('getPrediction prediction.id', prediction["id"]);
return prediction["id"] == id;
})
.share();
Unfortunately, this method proves ineffective as prediction["id"] returns undefined.
I struggle to grasp the functionality of the ArrayBuffer type and how I can interact with it.
- Therefore, my primary question is: How can I access/manipulate the outcome? Currently, I'm only able to retrieve the entire resulting array, not specific components within it.
- Furthermore: What purpose does share() serve? I couldn't locate any reference to it in the HttpClient code.
If additional details are required, I will update this post accordingly.
Thank you for taking the time to navigate through this and for any insight you may offer.
PS: While I acknowledge that I could delegate filtering tasks to the server simply by supplying the ID as an additional GET parameter, that might occur later on. As this is a fundamental issue I'm endeavoring to comprehend, I wish to address it promptly during my current assignment.
...