Json to Angular object - json

Question

I have following JSON and I try to map it to Angular 7 object with no result:
[
{
"id": "123456",
"general": {
"number": "123",
"name": "my name 1",
"description": "My description with <li> html tags </li>"
},
"option1": {
"name": "option1 name"
},
"option2": {
"suboption2": {
"name": "suboption2 name"
}
}
},
{
"id": "789123",
"general": {
"number": "456",
"name": "my name 2",
"description": "My description with <li> html tags </li>"
},
"option1": {
"name": "option2 name"
},
"option2": {
"suboption2": {
"description": "My description with <li> html tags </li>"
}
}
}
]
I tried to create MyClass instance with fields with the same name as in the JSON file and cast that JSON file to this class but with no success.

Answer 1

I would create a mapper (service) that receives your DTOs (data transfer object, essentially your JSON response) as parameter and output your MyClass object.
In your map function (in your service), you would iterate over your array of DTOs and create a new instance of MyClass for each DTO and then return your array of MyClass
map(myClassDtos:MyClassDTO[]):MyClass[]{
return myClassDtos.map(dto=>{
return new MyClass(...);
});
}

Answer 2

First I would change your JSON structure for something like this, it's more structured:
[
{
"id": "123456",
"general": {
"number": "123",
"name": "my name 1",
"description": "My description with <li> html tags </li>"
},
"options": [
{
"name": "option1 name"
},
{
"name": "option2 name",
"suboptions": [
{
"name": "suboption1 name"
}
]
}
]
},
{
"id": "789123",
"general": {
"number": "456",
"name": "my name 2",
"description": "My description with <li> html tags </li>"
},
"options": [
{
"name": "option1 name"
},
{
"name": "option2 name",
"suboptions": [
{
"name": "suboption1 name"
},
{
"name": "suboption2 name"
}
]
},
{
"name": "option3 name",
"suboptions": [
{
"name": "suboption1 name"
},
{
"name": "suboption2 name"
}
]
}
]
}
]
After that write model interfaces to model all your JSON array items:
main-element.ts
import { General } from './general';
import { Options } from './options';
export interface Element {
id?: number;
general?: General;
options?: Options[];
}
generl.ts
export interface General {
number?: number;
name?: string;
description?: number;
}
import { Suboptions } from './suboptions';
options.ts
export interface Options {
name?: string;
suboptions?: Suboptions[];
}
suboptions.ts
export interface Suboptions {
name?: string;
}
And finally, where you want to map, simply do this:
import { Component } from '#angular/core';
import { Element } from './models/main-element';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private elementsList: Element[] = [];
constructor(){
}
mapJSON(){
this.elementsList = this.someJsonString; //Here you need to insert your json string data
console.log(this.elementsList);
}
}
As result you will get this, if you print in console the elementsList object that's defined on the last part of code.