I am making a get request to a server from an angular client. The service in which I am making the calls needs to return an observable with an array of objects. The problem is that typescript doesn't seem to allow me to cast the JSON to my interface.
This is the JSON object the server is sending as a response:
export interface Message {
title: string;
body: string;
}
This is the interface I want to cast the body to. There body should contain an array of these objects:
export interface ICommonGameCard {
id: string;
pov: POVType;
title: string;
image_pair?: ICommonImagePair;
best_time_solo: number[];
best_time_online: number[];
}
export enum POVType{Simple, Free};
This the the service making the requests:
public getGameCards(povType: POVType): Observable<ICommonGameCard[]> {
return this.http.get<ICommonGameCard[]>(this.BASE_URL + this.GET_ALL_CARDS_URL)
.pipe(
map((res: Response) => return <ICommonGameCard>res.json().body),
catchError(this.handleError<Message>("getUsernameValidation")),
);
}
Obviously, this is not working. I am trying to cast the response's JSON to the message Interface, and then access the message's interface body where there is an array of ICommonGameCard.
I am getting this error:
[ts]
Argument of type 'OperatorFunction<Response, ICommonGameCard>' is not assignable to parameter of type 'OperatorFunction<ICommonGameCard[], ICommonGameCard>'.
Type 'Response' is missing the following properties from type 'ICommonGameCard[]': length, pop, push, concat, and 26 more. [2345]
What exactly is wrong with my syntax?
export interface Message {
title: string;
body: ICommonGameCard[];
}
public getGameCards(povType: POVType): Observable<ICommonGameCard[]> {
return this.http.get<Message>(this.BASE_URL + this.GET_ALL_CARDS_URL)
.pipe(
map((message: Message) => message.body),
catchError(this.handleError<Message>("getUsernameValidation"))
);
}
Related
I would like to add and populate additional fields (which are not sent by backend service) in my http model. Catch is that I am not able to populate (map) those fields in the place where http response is being received since I am using internal framework.
Is there a possibility in Typescript (Angular) to somehow override JSON Deserialisation flow/Instance creation and populate mentioned fields. For example:
interface ElectricDevice {
energy_meter_start: number; // received from backend service
energy_meter_stop: number; // received from backend service
energy_spent: number; // not received by backend service, but needs to be populated as energy_meter_stop - energy_meter_start
// ...
/* I would like to somehow populate energy_spent as energy_meter_stop-energy_meter_end on instance creation (deserialisation) */
}
You need a HttpInterceptor, in which you can manipulate data.
#Injectable()
export class CustomJsonInterceptor implements HttpInterceptor {
constructor(private jsonParser: JsonParser) {}
intercept(httpRequest: HttpRequest<any>, next: HttpHandler) {
if (httpRequest.responseType === 'json') {
// If the expected response type is JSON then handle it here.
return this.handleJsonResponse(httpRequest, next);
} else {
return next.handle(httpRequest);
}
}
Read more about it in the tutorials: https://angular.io/api/common/http/HttpInterceptor
I have asked you for the especific names of your services.
But, in the meantime, I give you a 'general' answer to your question.
You just need to do this:
this.yourService.yourGetElectriceDevices
.pipe(
map (_resp: ElectricDevice => _resp.energy_spent = _resp.energy_meter_stop - _resp.energy_meter_start
)
.subscribe( resp => { //your treatment to the response });
This above, only works for a rapid test.
If you want to do somethig more 'elaborated', you could transform your interface into a class, and add your calculated attribute, something like this:
export interface ElectricDevice {
energy_meter_start: number; // received from backend service
energy_meter_stop: number; // received from backend service
}
export Class ElectricDeviceClass {
energy_meter_start: number;
energy_meter_stop: number;
energy_spent: number;
constructor (data: ElectricDevice) {
this.energy_meter_start = data.energy_meter_start;
this.energy_meter_stop= data.energy_meter_stop;
this.energy_spent = this.energy_meter_stop - this.energy_meter_start;
}
And for using it, just:
import { ElectricDeviceClass, ElectricDevice } from './../model/...' // There where you have yours interfaces and model classes
this.yourService.yourGetElectriceDevices
.pipe(
map (_resp: ElectricDevice => new ElectricDeviceClass(_resp)
)
.subscribe( resp => { //your treatment to the response });
I have following code:
axios.get<Response>(url)
.then(response => {
console.log(response.data);
}).catch(error => {
// handle error
console.log(error);
});
JSON response contains fields that I cannot express in TypeScript:
{
"field:Type": "foo"
}
like: name:Type that contains string - in my case it's "foo"
How I can map such field in Response interface so I could use it later?
interface Response {
myMappedField: string;
}
In typescript you have to wrap it with single quotes,
interface Response {
myMappedField?: string;
'field:Type'?: string;
}
In the axios response object you can use the Dot/Bracket notation to read the propery.
response.data['field:Type']
I have an API which returns JSON data about football. The data is then passed to the frontend (angular) but when passing it to the array, the array is still remaining undefined.
JSON Data:
match_id":"194200",
"country_id":"41",
"country_name":"England",
"league_id":"148",
"league_name":"Premier League",
"match_date":"2019-04-01",
"match_status":"Finished",
"match_time":"21:00",
"match_hometeam_id":"2617",
"match_hometeam_name":"Arsenal",
"match_hometeam_score":"2 ",
"match_awayteam_name":"Newcastle",
"match_awayteam_id":"2630",
"match_awayteam_score":" 0",
This is the angular code to parse the JSON data and put in the array to display:
export class ResultComponent implements OnInit {
searchFilter: string;
resultArr: FootballModel[];
constructor(private footballService: FootballService, private route:
ActivatedRoute) {}
ngOnInit() {
this.footballService.getResults().subscribe(x => this.resultArr = x);
console.log(this.resultArr);
}
When I console.log the x passed in subscribe, the JSON information is returned. So till the x part it is passing well but when it is passing to resultArray and console.log that part, it is returning undefined. Wonder if anyone can help.
This is the model:
export class FootballModel {
countryName: string;
leagueName: string;
matchDate: string;
matchHomeTeamName: string;
matchAwayTeamName: string;
matchHomeTeamScore: string;
matchAwayTeamScore: string;
}
EDIT:
Also I am trying to display that data in a table, but somehow it is not showing. Pretty sure it's an easy mistake as well.
<tbody>
<tr *ngFor="let result of results">
<td>{{result.countryName}}</td>
<td>{{result.leagueName}}</td>
<td>{{result.matchDate}}</td>
<td>{{result.homeTeam}}</td>
<td>{{result.awayTeam}}</td>
<td>{{result.homeTeamScore}}</td>
<td>{{result.awayTeamScore}}</td>
</tr>
Http requests return Observable on Angular. Observables has async callback function and you can get data by subscribing it as you did. But when you try to reach data outside of callback function before .subscribe worked at least one time it must be undefined. Because it is writing to the console before your API send response. If you change your ngOnInit function like that it must work.
ngOnInit() {
this.footballService.getResults().subscribe(x => {
this.resultArr = x;
console.log(this.resultArr);
});
}
Also check the documentation for Observables
Here is an additional example for this case:
ngOnInit() {
console.log("a");
this.footballService.getResults().subscribe(x => {
console.log("c");
this.resultArr = x;
console.log(this.resultArr);
});
console.log("b");
}
Expected result on console is
"a" "b" "c"
So I'm getting the following JSON structure from my asp.net core api:
{
"contentType": null,
"serializerSettings": null,
"statusCode": null,
"value": {
"productName": "Test",
"shortDescription": "Test 123",
"imageUri": "https://bla.com/bla",
"productCode": null,
"continuationToken": null
}
}
I have the following typescript function that invokes the API to get the above response:
public externalProduct: ProductVM;
getProductExternal(code: string): Observable<ProductVM> {
return this.http.get("api/product?productCode=" + code)
.map((data: ProductVM) => {
this.externalProduct = data; //not working...
console.log("DATA: " + data);
console.log("DATA: " + data['value']);
return data;
});
}
ProductVM:
export interface ProductVM {
productName: string;
shortDescription: string;
imageUri: string;
productCode: string;
continuationToken: string;
}
My problem is that I can't deserialize it to ProductVM. The console logs just produce [object Object]
How can I actually map the contents of the value in my json response to a ProductVM object?
Is it wrong to say that data is a ProductVM in the map function? I have tried lots of different combinations but I cannot get it to work!
I'm unsure whether I can somehow automatically tell angular to map the value array in the json response to a ProductVM object or if I should provide a constructor to the ProductVM class (it's an interface right now), and extract the specific values in the json manually?
The data object in the map method chained to http is considered a Object typed object. This type does not have the value member that you need to access and therefore, the type checker is not happy with it.
Objects that are typed (that are not any) can only be assigned to untyped objects or objects of the exact same type. Here, your data is of type Object and cannot be assigned to another object of type ProductVM.
One solution to bypass type checking is to cast your data object to a any untyped object. This will allow access to any method or member just like plain old Javascript.
getProductExternal(code: string): Observable<ProductVM> {
return this.http.get("api/product?productCode=" + code)
.map((data: any) => this.externalProduct = data.value);
}
Another solution is to change your API so that data can deliver its content with data.json(). That way, you won't have to bypass type checking since the json() method returns an untyped value.
Be carefull though as your any object wil not have methods of the ProductVM if you ever add them in the future. You will need to manually create an instance with new ProductVM() and Object.assign on it to gain access to the methods.
From angular documentation: Typechecking http response
You have to set the type of returned data when using new httpClient ( since angular 4.3 ) => this.http.get<ProductVM>(...
public externalProduct: ProductVM;
getProductExternal(code: string): Observable<ProductVM> {
return this.http.get<ProductVM>("api/product?productCode=" + code)
.map((data: ProductVM) => {
this.externalProduct = data; // should be allowed by typescript now
return data;
});
}
thus typescript should leave you in peace
Have you tried to replace
this.externalProduct = data;
with
this.externalProduct = data.json();
Hope it helps
getProductExternal(code: string): Observable<ProductVM> {
return this.http.get("api/product?productCode=" + code)
.map(data => {
this.externalProduct = <ProductVM>data;
console.log("DATA: " + this.externalProduct);
return data;
});
}
So, first we convert the response into a JSON.
I store it into response just to make it cleaner. Then, we have to navigate to value, because in your data value is the object that corresponds to ProductVM.
I would do it like this though:
Service
getProductExternal(code: string): Observable<ProductVM> {
return this.http.get(`api/product?productCode=${code}`)
.map(data => <ProductVM>data)
.catch((error: any) => Observable.throw(error.json().error || 'Server error'));
}
Component
this.subscription = this.myService.getProductExternal(code).subscribe(
product => this.externalProduct = product,
error => console.warn(error)
);
I used this approach in a client which uses the method
HttpClient.get<GENERIC>(...).
Now it is working. Anyway, I do not understand, why I do not receive a type of T back from the http client, if I don't use the solution provided in the answer above.
Here is the client:
// get
get<T>(url: string, params?: [{key: string, value: string}]): Observable<T> {
var requestParams = new HttpParams()
if (params != undefined) {
for (var kvp of params) {
params.push(kvp);
}
}
return this.httpClient.get<T>(url, {
observe: 'body',
headers: this.authHeaders,
params: requestParams
}).pipe(
map(
res => <T>res
)
);
}
I have an issue while I try to cast a json response to object, all the properties of my object are string is that normal ?
Here is my ajax request :
public getSingle = (keys: any[]): Observable<Badge> => {
return this._http.get(this.actionUrl + this.getKeysUrl(keys))
.map((response: Response) => response.json() as Badge )
.catch(this.handleError);
}
Here is my badge model :
export interface Badge {
badgeNumber: number;
authorizationLevel: number;
endOfValidity: Date;
}
And here is where I call the service function and I'm facing the issue :
this._badgeService.getSingle(this.ids).subscribe(
(badge: Badge) => {
console.log(typeof(badge.endOfValidity)); // <-- returning string and not Date
},
error => console.log(error);
});
Thats kinda tricky to explain:
Date is a class, this means that values of type Date need to be created through a constructor call. In other words, create a class instance with new Date(...).
The Response.json method will only return an object in JSON format, and such doesnt contain an instance of any class, only maps of key:property.
So what you need to do, is to manually convert the value returned from .json() to a Base object. This can be done as follows:
public getSingle = (keys: any[]): Observable<Badge> => {
return this._http.get(this.actionUrl + this.getKeysUrl(keys))
.map(r => r.json())
.map(v => <Badge>{
badgeNumber: v.badgeNumber,
authorizationLevel: v.authorizationLevel,
endOfValidity: new Date(v.endOfValidity)
// preferably this string should be in ISO-8601 format
})
//the mapping step can be done in other ways most likely
.catch(this.handleError);
}