I have a simple class defined in Angular with some properties, and then I get the results via an Angular 4 HttpClient typed get.
getQuestions(): Observable<EhsAssessmentQuestion[]> {
this.http.get<EhsAssessmentQuestion[]>(....);
}
and then I use it like so:
this.ehsAssessmentService
.getQuestions()
.subscribe((data: EhsAssessmentQuestion[]) => {
if (data[0] instanceof EhsAssessmentQuestion) {
console.info("Yes!");
}
I'm basically just getting back a javascript object, not my EhsAssessmentQuestion class. What do I need to do in order to make it come through as the right type?
It seems what you get returned from the observable is Observable<Response> and not Observable<EhsAssessmentQuestion[]>. You should handle the mapping yourself:
return this.http.get(url)
.map(res => {
return res.json().results.map(item => {
return new EhsAssessmentQuestion(
item.firstProperty,
item.secondProperty,
...
);
});
Related
My API clients will pass the session token in the header or query string like:
Http Header with key/value like MyApp-Token abc123
Url:
https://api.example.com/v1/board?authToken=abc123
val secureRoutes =
authenticateToken() { authenticatedContext =>
path("board") {
get {
complete(s"board#index route ${authenticatedContext.user.username}")
}
}
}
Is there a built-in directive that can do this for me or do I have to somehow create my own custom directive that will first look in the HTTP headers, and if not there then look to see if there is a query string value at the key authToken ?
If I have to create a custom directive, any examples I can follow or learn from?
I know I can get a HTTP header using the built-in directive:
headerValueByName("x-authToken") { authToken =>
get {
complete(s"board#index route 2.1 $authToken")
}
}
And there is also a directive to get the value from a query string:
parameter("authToken") { authToken =>
...
}
How could I combine both of them, and then internally I would want to make a database call, and then instead of returning authToken I want to return a custom case class that will contain data I just loaded from the database like:
case class AuthenticatedContext(authToken: String, user: User, ...)
We can always construct a custom directive or compose the directives as shown below:
case class AuthenticatedContext(authToken: String)
def validateTokenAndGetAuthContext(token: String): Future[AuthenticatedContext] = {
Future.successful(AuthenticatedContext(token))
}
val authToken: Directive1[AuthenticatedContext] = optionalHeaderValueByName("authToken").flatMap {
case Some(token) =>
onComplete(validateTokenAndGetAuthContext(token)).flatMap {
case Failure(_) => reject(AuthorizationFailedRejection)
case Success(value) => provide(value)
}
case None =>
parameter("authToken".optional).flatMap {
case Some(token) =>
onComplete(validateTokenAndGetAuthContext(token)).flatMap {
case Failure(_) => reject(AuthorizationFailedRejection)
case Success(value) => provide(value)
}
case None => reject(AuthorizationFailedRejection)
}
}
It's constructed using HeaderDirectives, ParameterDirectives and FuturesDirectives.
Suppose we have an observable main object array, and observable data about that array (e.g. suppose we have selectedReports and reportParameters) . Now suppose we emit action to either add report to the array or remove report from that array. How do we run an action to fetch the data for reportParameters, as reaction?
Thus far, my attempt, which isn't working, looks like this:
// report parameters stuff
async fetchAllReportParameters() {
reaction(
() => this.selectedReports,
async (reports) => {
// reset the report parameters
this.reportParameters = {}
// fetch the parameters for all the reports
await reports
.forEach((report) => {
this.fetchReportParameters(report.Id)
})
}
)
}
/**
* fetches report parameters for a reportId
* #param {number} reportId
*/
fetchReportParameters = (reportId) => {
this.reportParameters[reportId] = []
const onSuccess = (reportParameters) => {
this.reportParameters[reportId] = reportParameters
}
this.api.GetReportParameters(reportId)
.then(onSuccess, this.fetchReportParametersError)
}
fetchReportParametersError = (error) => {
// TODO: output some error here
}
Are you ever actually calling fetchAllReportParameters? If you don't, the reaction will never be created. You may instead like to create the reaction from the constructor, assuming you always want it to be run. One example:
class SomeStore {
constructor() {
this.disposeReportsReaction = reaction(
() => this.selectedReports.slice(),
reports => {
// ...
}
)
}
}
Call storeInstanceName.disposeReaction() whenever you're done with the reaction.
Notice that I've used .slice() here. This is because if you simply pass the array reference, the reaction will never be called. See reaction docs: you have to actually use the value in some way.
You also need to tweak the async code a bit. This:
async (reports) => {
await reports.forEach((report) => {
// ...
})
}
won't do what you hope, because forEach returns undefined. Even if you shift the async keyword to the forEach callback, all the API requests will be sent in quick succession. Consider using something like this instead, depending on whether you want to wait for the preceding request before sending the next one:
try {
for (const report of reports) {
await this.fetchReportParameters(report.id)
}
} catch (e) {
// handle error
}
This isn't always the right answer: sometimes it's fine to send a bunch of requests in quick succession (perhaps especially if it's a small batch, and/or in the context of HTTP/2). If that's ok with you, you could use:
reports => {
// ...
reports.forEach(report => this.fetchReportParameters(report.id))
}
I need advise for handling errors in front-end of web application.
When I call a service to get the community according to community in web app, I want it to catch an error. For example for catching errors like 404.
There is a service for getting community according to id provided.
getCommunity(id: number) {
return this.http.get(`${this.api}/communities/` + id + ``);
}
that is called in events.ts file
setCommunityBaseUrl() {
this.listingService.getCommunity(environment.communityId).subscribe((data: any) => {
this.communityUrl = data.url + `/` + data.domain;
});
}
The id is provided in environment. Let's say there are 20 communities in total. When I provide id = 1 the events according to community = 1 appears.
export const environment = {
production: ..,
version: 'v2',
apiUrl: '...',
organization: '...',
websiteTitle: '...',
communityId: 1,
googleMapsApiKey: '...'
};
The problem is that when I provide id = null all community events are occurring | all events list in the backend is occurring.
Please, help ^^
When you subscribe you subscribe with an Observer pattern. So the first function you pass in
.subscribe(() => {} );
fires when the Observable calls .next(...)
and after that you can provide another function which will fire whenever the Observable calls .error(...)
so
.subscribe(() => {}, (error) => { handleTheError(error); } );
The this.http.get(...); returns an Observable which will fire the .error(...) on http error
We also know that this.http.get(...) completes or "errors" and it's not an endless one (a one that never completes). So you can make it a promise and manipulate on it promise like.
async getMeSomething(...) {
try {
this.mydata = await this.http.get(...).toPromise();
}
catch(error) {
handleTheError(error)
}
}
But what I really recommend is to use Swagger for your backend and then generate the API Client class with NSwagStudio so you don't have to write the client manually or adjust it or deal with error catching. I use it all the time and it saves us an enormous amount of time
Because you are using ".subscribe" you can create your own error handler and catch the errors like this, directly on the method.
This is an example on how you can use this:
constructor(
private _suiteAPIService: SuitesAPIService,
private _testcaseService: TestcaseService,
public _tfsApiService: TfsApiService,
private _notificationService: NotificationService) { }
errorHandler(error: HttpErrorResponse) {
return observableThrowError(error.message || "Server Error")
}
public something = "something";
GetTestcasesFromSuiteSubscriber(Project, BuildNumber, SuiteId) {
this._suiteAPIService.GetTestResults(Project, BuildNumber, SuiteId).subscribe(
data => {
console.log(data);
this._testcaseService.ListOfTestcases = data;
//Notofication service to get data.
this._notificationService.TestcasesLoaded();
},
error => {
//Here we write som error
return this.something;
}
);
}
I am trying to find if it possible to use the beforeAction in the controller to access the injected parameter.
For example, every action in the controller accepts type parameter, which I need to sanitize:
public function actionGetCustomPaymentsChunk($type) {
$type = TextUtil::sanitizeString($type);
// Get filter data
$filter = FilterHelper::getFilterData();
// Initialize components
$totalCostPayableComponent = new TotalCostPayableComponent($filter);
// Get chunk data
$data = $totalCostPayableComponent->getCustomPaymentChunk($type);
// Return content to client side
$this->renderPartial('/partials/_payable_cost_chunk', array(
'data' => $data,
'route' => 'totalCostPayable/getCustomPaymentsGrid',
'type' => $type,
'paymentType' => 'Custom',
));
}
}
Is this possible to do (I am trying to avoid repetition)?
You should be able to, what did you try?
Assuming the $type is passed via GET, you can modify it in a beforeAction and the modified value will be applied to the target action with a request like
http://myhost.com/route/test?type=something
using the below, $type = "foo" in any action in this controller.
protected function beforeAction($action)
{
if (isset($_GET['type'])) {
$_GET['type'] = 'foo';
}
...
return parent::beforeAction($action);
}
public function actionTest($type)
{
# $type === 'foo'
...
}
Change the manipulation in beforeAction to satisfy whatever your requirements are.
I have this method to get data from an API, which sends me information of many furniture pieces:
loadPieces() {
this.isLoading = true;
axios.get(this.galleryRoute)
.then(r => {
this.gallery = r.data;
this.isLoading = false;
})
.catch(error => {
this.$nextTick(() => this.loadPieces());
});
console.log(this.galleryRoute);
},
This is a part of the response I get, which represents only one piece:
[[{"id":266,"name":" Tray 7x45x32, white stained ash","thumbnail":{"width":840,"height":840,"urls":{"raw":"http:\/\/localhost:8888\/storage\/9c\/9d\/9c9dadc6-15a2-11e8-a80a-5eaddf2d1b4a.jpeg","small":"http:\/\/localhost:8888\/storage\/9c\/9d\/9c9dadc6-15a2-11e8-a80a-5eaddf2d1b4a#140.jpeg","medium":"http:\/\/localhost:8888\/storage\/9c\/9d\/9c9dadc6-15a2-11e8-a80a-5eaddf2d1b4a#420.jpeg"}}},
Now I want to create a filter so that I can get a specific piece from the JSON object, using it's id. I've tried searching but so far I have no idea how to do this.
Thanks in advance!
Add a computed property which applies the filter to this.gallery:
computed: {
filteredGallery() {
if (!this.gallery) return []; // handle gallery being unset in whatever way
return this.gallery.filter(picture =>
// some reason to show picture
);
}
}
I'm assuming gallery is an array, but you could apply a similar technique to it if it was an object, using e.g. Object.keys(this.gallery).
Then in your template, use filteredGallery instead of gallery.