I have the following function:
class RestService {
public async get<T>(func: string): Promise<T> {
var toRet = {};
await fetch(EndPoint + func)
.then(response => response.json() as Promise<T>)
.then(data => {
toRet = data;
})
.catch(e => {
});
return toRet as T;
}
}
Everything works fine but the response I get in 'data' is ALWAYS a generic object.
For example I might have a model like so:
class Model
{
string name;
}
and call the function like so:
get<Model>("getmodel")
The response is ALWAYS a generic object that looks like:
{name:"some name"}
From my understanding generics are supported in Typescript and Promise takes in variable types, my only thought is that I can't pass a generic into a generic?
Maybe a better way to write it would be this way.
class RestService {
public async get<T>(func: string): Promise<T | void> {
return await fetch('' + func)
.then(response => response.json() as Promise<T>)
.then(data => {
return data;
})
.catch(e => {
});
}
}
You can see it in the playground too at this link.
This way you don't have to overwrite any types and the compiler can figure out everything on it's own.
The return type is now Promise<T | void> because the catch function doesn't return anything. You could have something else or nothing depending what you do in case of an error.
Typescript will not transform the data object to match the T type you give in automatically.
If for example you call the method with get<AnotherModel>('modelEndpoint') but the endpoint returns Model. While the type at build time will say you should expect an object of type AnotherModel at runtime the object will in fact be of type Model.
This isn't clear from the question but maybe your issue is with the fact that the data is of type T instead of the Promise<T> that you return in the previous then callback.
If that is the case, that's because any Promise sent as a callback to the then function is resolved first before the outer then is called.
That means your code is equivalent to.
.then(response => response.json().then((data) => data as T))
.then(data => {
return data;
})
It's just that the Promise api will just take care of that for you.
If you want to learn more about the pitfalls of Promises in Javascript this post is quite good.
Related
I have this sample TypeScript code that is supposed to deserialize a simple JSON into an instance of class Person and then call foo method on it, but it doesn't work:
class Person {
name!: string;
age!: number;
foo() {
console.log("Hey!");
}
}
fetch("/api/data")
.then(response => {
return response.json() as Promise<Person>;
}).then((data) => {
console.log(data);
data.foo();
});
The output of console show that object is in a proper shape, but it is not recognized as Person:
Object { name: "Peter", age: 44 }
age: 44
name: "Peter"
Thus when it tries to call foo method it fails:
Uncaught (in promise) TypeError: data.foo is not a function
http://127.0.0.1:8000/app.js:14
promise callback* http://127.0.0.1:8000/app.js:12
How can I fix it? Should I use Object.assign or there is another better/native solution?
let x = (<any>Object).assign(Object.create(Person.prototype), data);
x.foo();
Remember, TypeScript is just a way of annotating JavaScript code with type guards. It doesn't do anything extra. For example, saying that the object returned by response.json() should be treated as a Promise<Person> does not mean it will invoke the constructor of your Person class. Rather, you'll just be left with a plain old JavaScript object that has a name and an age.
It looks to me like you'll need to create a constructor for your Person class which can create a new instance of a Person based on an object that matches its interface. Something like this, perhaps?
interface PersonLike {
name: string;
age: string;
}
class Person implements PersonLike {
constructor(data: PersonLike) {
this.name = data.name;
this.age = data.age;
}
name: string;
age: string;
foo() {
console.log("Hey!");
}
}
fetch("/api/data")
.then(response => {
return response.json() as Promise<PersonLike>;
}).then((data) => {
const person = new Person(data);
person.foo();
});
I'd also recommend using a type guard instead of the as keyword, in case the API you're fetching data from changes. Something like this, perhaps:
function isPersonLike(data: any): data is PersonLike {
return typeof data?.name === 'string' && data?.age === 'string';
}
fetch("/api/data")
.then(response => {
return response.json();
}).then((data: unknown) => {
if (isPersonLike(data)) {
const person = new Person(data);
person.foo();
}
});
... is supposed to deserialize a simple JSON into an instance of class Person and then ...
Unfortunately, generic type in TypeScript only works as some kind of model design assistant. It will never be compiled into JavaScript file. Take your "fetch" code for example:
fetch("/api/data")
.then(response => {
return response.json() as Promise<Person>;
}).then((data) => {
console.log(data);
data.foo();
});
After compile the above TypeScript file into JavaScript, we can find the code as Promise<Person> is completely removed:
fetch("/api/data")
.then(function (response) {
return response.json();
}).then(function (data) {
console.log(data);
data.foo();
});
To implement "type safe deserialization", you need to save class/prototype information during serialization. Otherwise, these class/prototype information will be lost.
... or there is another better/native solution? ... BTW, what if a class field has a custom type, so it is an instance of another class?
No, there is no native solution, but you can implement "type safe" serialization/deserialization with some libraries.
I've made an npm module named esserializer to solve this problem automatically: save JavaScript class instance values during serialization, in plain JSON format, together with its class name information. Later on, during the deserialization stage (possibly in another process or on another machine), esserializer can recursively deserialize object instance, with all Class/Property/Method information retained, using the same class definition. For your "fetch" code case, it would look like:
// Node.js server side, serialization happens here.
const ESSerializer = require('esserializer');
router.get('/api/data', (req, res) => {
// ...
res.json(ESSerializer.serialize(anInstanceOfPerson));
});
// Client side, deserialization happens here.
const ESSerializer = require('esserializer');
fetch("/api/data")
.then(response => {
return response.text() as Promise<string>;
}).then((data) => {
const person = ESSerializer.deserialize(data, [Person, CustomType1, CustomType2]);
console.log(person);
person.foo();
});
I have a problem concating 2 json objects together. Basicly my app is doing a get on my rest server every second and i'm only sending the newest data back so as angular is refreshing the whole object i found on google that i can concat the 2 jsons together (old and new) so i can keep everything. But the problem is that none of the concat/merge/extend functions work and i don't know what i'm missing.
data: any = null;
constructor(private _http: Http) {
setInterval(() => this.getLogs(), 1000)
}
public getLogs() {
return this._http.get('http://localhost')
.map((res: Response) => res)
.subscribe(data => {
if data._body != ''{
//this.data = data.json()
if this.data == null
this.data = data.json();
else
extend(this.data,data.json()); // PROBLEM HERE
}
console.log(this.data);
});
}
So far i tried this.data.concat(data.json()); if i try extend(this.data, data.json()) or merge(this.data, data.json()); I get errors saying that it's not defined. The concat function doesn't do anything. Doesn't trigger errors neither concat so i don't know what it is doing.
I'm logging the object everytme and i can see the object always stays at the first ever response i get (meaning it only does the if this.data == null).
https://www.w3schools.com/jsref/jsref_concat_array.asp states
The concat() method is used to join two or more arrays.
This method does not change the existing arrays, but returns a new
array, containing the values of the joined arrays.
So you need to concat the two arrays into the data variable
data: any = null;
constructor(private _http: Http) {
setInterval(() => this.getLogs(), 1000)
}
public getLogs() {
return this._http.get('http://localhost')
.map((res: Response) => res)
.subscribe(data => {
if data._body != ''{
//this.data = data.json()
if this.data == null
this.data = data.json();
else
this.data = this.data.concat(data.json());
}
console.log(this.data);
});
}
You can use spread operator to generate new object:
this.data = {...this.data, ...data.json()};
What this does is create a new object and then first migrates all the fields and values from this.data and then same thing from data.json() while overriding any existing fields that were already in this.data.
Not sure where you're getting extend from. That's not a function.
You can't concat two objects together. You're calling res.json(), so the return is no longer JSON. Even if you were, you can't just concat JSON strings together and expect the result to be valid.
You'd want to merge the objects together, which can be done with Object.assign(this.data, data.json() or a spread: this.data = {...this.data, ...data.json()}.
On top of that, you'd want to try/catch your JSON parsing before assigning. Plus, your map function is doing literally nothing. You can parse it there instead.
You can also streamline this by just initializing data to an empty object.
public data: any = {}
public getLogs() {
return this._http.get('http://localhost')
.map(res => res.json())
.filter(res => !!res) // ensure data exists
.subscribe(data => {
Object.assign(this.data, data);
});
}
Having said that, making a REST call every second seems like an egregious waste of resources and will put strain on Angular's change detection, with performance degrading as data increases. If the objects don't need to be merged, i.e. each call is segmented data, consider pushing new data to an array instead of an object. Plus, you might want to consider doing something a little more sane, like implementing an event stream like SSE (server sent events) on the backend.
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);
}
I realized a strange thing with my Angular2 typescript project. I have objects coming in from a webservice which have the type "Level" (it has the same properties as the Json coming from the webservice). In runtime comes out that the properties of the Level from the webservice have capital letters (Pascal case) at the beginning and the ones in my typescript project have small ones (visible in the browser's developer debug tool).
I guess I need to map the json properties somewhere somehow instead of doing a cast by writing "as Level[]" everywhere. How to I do it properly?
Update regarding the question that I should post some code:
(Controller)
ngOnInit(): void {
this.levelsObservable = this.levelsService.getAllLevels();
this.levelsObservable.subscribe(
data => console.log(data)
);
}
(Service)
observable : Observable<Response>;
getAllLevels(): Observable<Level[]> {
this.observable = this.achievementsService.getAllAchievements(this.allLevelsUrlPart);
return this.observable
.map((response: Response) => {
const srcData = response.json() as Level[];
return srcData;})
.catch(error => this.handleError(error));}
getAllAchievements(detailPath): Observable<Response> {
// prepare request url and header
this.specificUrl = this.webServiceUrl + detailPath;
this.headers.append('Content-type', 'application/json');
let options = new RequestOptions({ headers: this.headers });
this.result = this.http.get(this.specificUrl, options)
.catch(error => this.handleError(error));
return this.result;}
Update:
I polished my code a bit with the help of one answer below (not integrated above because not essential to solve the main problem).
I tried to use the other answer from below to reach the camel cases but it wasn't working (I have an array and in the array are objects with properties, but an object's properties aren't accessible with iterator methods).
Update:
I finally managed it (!) :) I shortened this post a bit and will now post my solution below. It's for sure not the most beautiful, but I'm happy to have one after searching around for hours. Thanks to all people helping me with their great and input here!
You could use this to get the lowercased objects.
modifiedSrc(srcData){
let obj = {};
Object.keys(srcData).forEach((key)=>{
obj[key.uncapitalize()] = srcData[key];
})
return obj
}
String.prototype.uncapitalize = function() {
return this.charAt(0).toLowerCase() + this.slice(1);
}
Then you can return the modified data
getAllLevels(): Observable<Level[]> {
this.observable = this.achievementsService.getAllAchievements(this.allLevelsUrlPart);
return this.observable
.map((response: Response) => {
const srcData = response.json() as Level[];
return this.modifiedSrc(srcData);})
.catch(error => this.handleError(error));}
You have complicated both of your methods.Make it simple as
this.webServiceUrl = "http...." ; // your service end point address
this.headers.append('Content-type', 'application/json');
let options = new RequestOptions({ headers: this.headers });
// For all your error handling
private handleError(error: Response) {
console.log(error);
return Observable.throw(error.json().error || 'Internal Server error');
}
Your service method can use TypeCasting which will look like
getAllLevels(detailPath): Observable<Level[]> {
return this.http.get(detailPath, options)
.map((response: Response) => <Level[]>response.json())
.catch(this.handleError);
}
Your component should raise the request to your service as
ngOnInit() : void{
this._myService.getAllLevels()
.subscribe(levels => this.levels = levels,
error =>this.errorMessage =<any> error);
}
Your variable declaration must be like
levels:Level[];
So finally... I got a solution! For sure not the most beautiful one, but easy to understand and done with hard work and research:
private useLevelProperties (response: any): Level[]{
let levels: Level[] = [];
Object.keys(response).forEach((key) => {
//create a new object and just take out the json parts needed. The webservice retrieves Pascal case letters, so we
//need to convert them into camel case ones.
this.level = new Level(response[key]["AchievementId"], response[key]["Image"],
response[key]["GrantedTo"], response[key]["GrantedBy"], response[key]["GrantedWhen"], response[key]["Description"],
response[key]["Name"], response[key]["CompetitionCode"], response[key]["Number"]);
levels[key] = this.level;
});
return levels;
};
Another option is to do it server-side with an extra json option for camel case: example for server-side camel casing