I am trying to cast the content of my FormGroup value into an interface which I want use for posting something to my Web Api.
My interface looks like this:
export interface MoneyItemI {
Description: string;
Amount: number;
}
My submit methods looks like this:
onSubmit() {
let jsonString = JSON.stringify(this.itemForm.value);
let mi = <MoneyItemI>JSON.parse(jsonString);
}
I can see that I get an object created with JSON.parse but unfortunately it does not look like it an valid MoneyItemI object for me.
Property 'Amount' for example is not a number. It is assigned like a string.
How can I create a valid interface with the value of my FormGroup?
Does this.itemForm.value have the correct Amount and Description properties before you call JSON.stringify(this.itemForm.value)?
If so, you should be able to just do:
let mi = <MoneyItemI>this.itemForm.value;
Related
So i'm just starting out with typescript and something that I can't find much info on is how to deal with types for api call responses.
Lets say, I make a GET request to an api and it returns a JSON object for example:
{
name: "john",
age: 12
}
in my code, if i wanted to interact with response.name would i have to create an interface like below to use response.name without having a red linter under it?
interface Response {
name: string,
age: number
}
or is there a easier way to do it as some api calls would return JSON > 10 lines long and copying out the whole structure for every type of call seems very troublesome. Another thought I had was to create the interface but only have values I would use instead of the whole structure, but i'm not too sure so any help would be greatly appreciated!
You can define Response as a "common" type, that supports all types of API json response.
interface IResponse {
[key: string]: any
}
Now, you can type response.name without the "red line", also response.not_exist_property is valid.
My recommendation is to define all types for all API response type:
interface GetUserResponse {
name: string,
age: number,
}
for GET /users/:id (example)
You can use this tool to convert a json response to Typescript type.
I have type like this:
export type Model = {
Id: number,
Name: string
}
and a JSON response like this: {"id": 0, "name": "User"}.
After Axios parsed that response (const response = await Axios.get<Model>(source)), I get next object:
Id: undefined Name: undefined id: 0 name: "User"
How correctly parse response to PascalCase model kind?
`
There are many ways to do this, but whatever happens, you need to change your types, as they're not correct at the moment, and you need to manually transform your result object.
The types currently say that Axios.get will return a model with Id and Name keys, which is definitely wrong (it will return a model with id and name keys). You can transform this result, but can't easily change the first return value there, so you need to correct that.
Once that's correct, you need to transform the JSON response to the model you want. One option is to use lodash, which makes this fairly easy.
A full example might look like this:
export type Model = {
Id: number,
Name: string
}
// Get the raw response, with the real type for that response
const response = await Axios.get<{ id: number, name: string }>(source);
// Transform it into a new object, with the type you want
const model: Model = _.mapKeys(response,
(value, key) => _.upperFirst(key) // Turn camelCase keys into PascalCase
);
There are lots of other ways to do the last transformation step though, this is just one option. You might also want to think about validation first too, to check the response data is the shape you expect, if that's a risk in your case.
export interface blog {
id: number;
name: any;
status: any;
active: string;
modifiedAt: Date;
}
How does your JSON file looks like ?
Second where from are you trying to get the JSON from a server or you have defined somewhere in your code as file.
Third you need to create an empty array of objects which at you it is blog and then to parse that Json to this blog and then through *ngFor you can easily show data in your UI which depends on your HTML.
Consider the following interface within TypeScript
interface IApiCall<TResponse> {
method: string;
url: string;
}
Which is then used within the following method;
const call = <TResponse>(api: IApiCall<TResponse>): void => {
// call to API via ajax call
// on response, grab data
// use JSON.parse(data) to convert to json object
return json as TResponse;
};
Now we use this for Type safety within our methods so we know what objects are being returned from the API. However, when we are returning a single string from the API, JSON.parse is converting the string '12345' into a number, which then breaks further down the line when we are trying to treat this as a string and use value.trim() yet it has been translated into a number.
So ideas to solve this so that we are not converting a string into a number.
How can we stop JSON.parse from converting a single string value into a number?
If using JSON.parse, we check the type of TResponse and compare it against the typeof of json generated.
if (typeof (json) !== typeof(TResponse))...
However there doesn't seem to be an obvious way to determine the generic type.
Question 1: How can we stop JSON.parse() from converting a single string value into a number?
JSON is a text format, so in JSON.parse(x), x needs to be a string. But JSON text represents data of not-necessarily-string types. It sounds like you might be making a category mistake, by confusing a thing with its representation.
If you convert the number 12345 to JSON (JSON.stringify(12345)) you will get the string "12345". If you parse that string, (JSON.parse("12345")), you will get the number 12345 back. If you wanted to get the string "12345", you need to encode it as JSON ( JSON.stringify("12345")) as the string "\"12345\"". If you parse that ( JSON.parse('"12345"') you will get the string "12345" out.
So the straightforward answer to the question "How can we stop JSON.parse() from converting a single string value into a number" is "by properly quoting it". But maybe the real problem is that you are using JSON.parse() on something that isn't really JSON at all. If you are given the string "12345" and want to treat it as the string "12345", then you don't want to do anything at all to it... just use it as-is without calling JSON.parse().
Hope that helps. If for some reason either of those don't work for you, you should post more details about your use case as a Minimal, Complete, and Verifiable example.
Question 2: How do we determine that the returned JSON-parsed object matches the generic type?
In TypeScript, the type system exists only at design time and is erased in the emitted JavaScript code that runs later. So you can't access interfaces and type parameters like TResponse at runtime. The general solution to this is to start with the runtime solution (how would you do this in pure JavaScript) and help the compiler infer proper types at design time.
Furthermore, the interface type IApiCall
interface IApiCall<TResponse> {
method: string;
url: string;
}
has no structural dependence on TResponse, which is not recommended. So even if we write good runtime code and try to infer types from it, the compiler will never be able to figure out what TResponse is.
In this case I'd recommend that you make the IApiCall interface include a member which is a type guard function, and then you will have to write your own runtime test for each type you care about. Like this:
interface IApiCall<TResponse> {
method: string;
url: string;
validate: (x: any) => x is TResponse;
}
And here's an example of how to create such a thing for a particular TResponse type:
interface Person {
name: string,
age: number;
}
const personApiCall: IApiCall<Person> = {
method: "GET",
url: "https://example.com/personGrabber",
validate(x): x is Person {
return (typeof x === "object") &&
("name" in x) && (typeof x.name === "string") &&
("age" in x) && (typeof x.age === "number");
}
}
You can see that personApiCall.validate(x) should be a good runtime check for whether or not x matches the Person interface. And then, your call() function can be implemented something like this:
const call = <TResponse>(api: IApiCall<TResponse>): Promise<TResponse | undefined> => {
return fetch(api.url, { method: api.method }).
then(r => r.json()).
then(data => api.validate(data) ? data : undefined);
};
Note that call returns a Promise<Person | undefined> (api calls are probably asynchronous, right? and the undefined is to return something if the validation fails... you can throw an exception instead if you want). Now you can call(personApiCall) and the compiler automatically will understand that the asynchronous result is a Person | undefined:
async function doPersonStuff() {
const person = await call(personApiCall); // no <Person> needed here
if (person) {
// person is known to be of type Person here
console.log(person.name);
console.log(person.age);
} else {
// person is known to be of type undefined here
console.log("File a missing Person report!")
}
}
Okay, I hope those answers give you some direction. Good luck!
Type annotations only exist in TS (TResponse will be nowhere within the output JS), you cannot use them as values. You have to use the type of the actual value, here it should be enough to single out the string, e.g.
if (typeof json == 'string')
I have seen a lot of answers on here, being able to parse a JSON object which is local to the component.
In my application I am accessing a big JSON file from a server/database. Therefore I have big JSON file which needs parsed in to my object different properties.
My object looks like this:
export class ICase {
id: number;
name: string;
description: string;
shareCaseXml?: string[];
fileType: string;
courtFolder?: string;
IPC?: number;
nicheID?: number;
date?: string;
suspects?: Array<ISuspect>
offences?: Array<IOffence>;
incidents?: Array<IIncident>;
policeOfficers?: Array<IPolice>;
involved?: Array<IInvolved>;
casedeit?: Array<ICasedeit>;
docEvidence?: Array<IDocEvidence>;
witness?: Array<IWitness>;
victims?: Array<IVictim>;
evidence?: Array<IEvidence>;
statements?: Array<IStatements>;
interview?: Array<IInterview>;
notebook?: Array<INotebook>;
complaint?: Array<IComplaint>;
}
I then have a method which uses a service to get the data from the database and assign it to the object "allCases". The problem I have is the JSON file looks a bit like this:
"templates": [
{
"name": "023-VMO-SubmitRemandFile-Case-013",
"description": "1 suspect 2 offences, with bail",
"shareCaseXml": "<nic:ShareCase xmlns:nic=\"http://psni.pnn.police.uk/si/nichedsm\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\">\r\n <nic:Case AfterTimestamp=\"2015-02-04T14:44:00\">\r\n <nic:ShareCaseReason>SubmitRemandFile</nic:ShareCaseReason>\r\n <nic:InvolvedPersonsAndOrganisations>\r\n <nic:InvolvedPersons>\r\n <nic:InvolvedPerson Identifier=\"150000111000000000150343\" AfterTimestamp=\"2013-10-04T13:25:03.000\">\r\n
The "shareCaseXml" variable of the JSON object contains lots of variables I need to extract. My main concerns are
-How do I access my components property to parse each variable of the big shareCaseXml variable
-Any of the examples I have seen already have their XML hard coded in to a local array, therefore I am unsure of how to access and then parse each individual bit.
All help would be appreciated! Many thanks!