Create model for JSON in Angular 9 - json

Question

I want to model this api response; as you see for each id we should create a property and add to object model
API response is :
{
"result": {
"id_8knimfclf": {
"text1": "X^2 is a function.",
"type": "truefalse",
"choices": ["true", "false"],
"marks": 1,
"answer": "false"
},
"id_8knimfcle": {
"text1": "Which one is true?",
"type": "multichoice",
"choices": ["first", "second", "third"],
"marks": 3,
"answer": "first"
},
....there are a lot of id due to user data enterance
}
}
I create something like this:
export interface details{
text1?string;
type?:string;
marks?:string;
choices?:string[];
answer?:string;
}
export class model{
id?:string;
detail?:details;
constructor(id:string,detail:details){
this.id=id;
this.details=detail;
}
}
but the output json file an array of object like below
[
{id:"id_8knimfclf",
details:{"text1": "X^2 is a function.","type": "truefalse","marks": 1,"choices": ["true", "false"],"answer": "false"}},
{id:"id_8knimfcle",
details:{"text1": "Which one is true","type": "multichoice","marks": 1,"choices": ["first", "second", "third"],"answer": "false"}},
//other id
]
Any help is appreciated

Answer 1

The problem is that when you convert an object to JSON the name of property becomes the key of the json.
If i take the example array of elements you provided and i run it in json2ts i have the following output models:
export interface Id8knimfclf {
text1: string;
type: string;
choices: string[];
marks: number;
answer: string;
}
export interface Id8knimfcle {
text1: string;
type: string;
choices: string[];
marks: number;
answer: string;
}
export interface Result {
id_8knimfclf: Id8knimfclf;
id_8knimfcle: Id8knimfcle;
}
export interface RootObject {
result: Result;
}
But i imagine it's not very useful to create a interface/model of every possible "id" of your list, also because probably you don't know which values you will have.
So we can use a trick that come from javascript and a loose object in which we can assign the name of the property dynamically instead of the value
Let's create out loose object
export interface Result {
[key: string]: details;
}
To use it to define the property name with the id values
private convertToJson(models: model[]): string {
const results: Result[] = [];
for (let model of models) {
let result: Result = {};
result[model.id] = model.details;
results.push(result);
}
return JSON.stringify(results);
}
So if you provide this input to the convertToJson function
[
{
id: "id_8knimfclf",
details: {
text1: "X^2 is a function.",
type: "truefalse",
marks: 1,
choices: ["true", "false"],
answer: "false"
}
},
{
id: "id_8knimfcle",
details: {
text1: "Which one is true",
type: "multichoice",
marks: 1,
choices: ["first", "second", "third"],
answer: "false"
}
}
]
You will have the JSON you looking for as output:
[{"id_8knimfclf":{"text1":"X^2 is a function.","type":"truefalse","marks":1,"choices":["true","false"],"answer":"false"}},{"id_8knimfcle":{"text1":"Which one is true","type":"multichoice","marks":1,"choices":["first","second","third"],"answer":"false"}}]
I have create this stackblitz example that prints the result in console.