CODEWITHSUNDEEP
jsonangulartypescriptobjectdefinition
Naomh
Naomh

Reputation: 321

Typescript: defining an object for a json

I need to put this json

"id": "x1",
"severity": 100,
"timestamp": 1599230966,
"attr1": "...",
"attr2": "...",
"origin": [{
    "id": "x3",
    "severity": 75,
    "timestamp": 1599230366,
    "attr1": "...",
    "origin": [{
            "id": "x2",
            "severity": 50,
            "timestamp": 1599229766,
            "attr1": "...",
            "attr2": 555,
            "attr3": "...",
            "origin": []
        },
        {
            "id": "x1",
            "severity": 25,
            "timestamp": 1599229166,
            "attr1": "...",
            "origin": []
        }
    ]
}]

into an object, and I just don't know how to define the object that is suitable for this json. I've struggled a lot,so please help me. Thank you in advance

Upvotes: 0

Views: 137

Answers (3)

A.khalifa
A.khalifa

Reputation: 2496

You need to create an interface and assign it to the result.

export interface Origin{
  id?: string;
  severity?: number;
  timestamp?: number;
  attr1?: string;
  attr2?: string;
  orginArray: Origin[];
}

in you controller

private origin: Origin;

and in function of return the result

this.origin = result;

// Second option

//main.ts

export interface IOrigin {
      id?: string;
      severity?: number;
      timestamp?: number;
      attr1?: string;
      attr2?: string;
      origin: IOrigin[];
    }

class Origin implements IOrigin {
      id?: string;
      severity?: number;
      timestamp?: number;
      attr1?: string;
      attr2?: string;
      origin: Origin[];
  constructor(values: IOrigin) {
      this.id = values.id;
      // assign all your attributes
      this.origin = values.origin !== undefined ? toOriginList(values.origin) : undefined;
  }
}


function toOriginList(values: IOrigin[]): Origin[] {
    return values.map(tree => new Origin(tree));
}

Hope useful

Upvotes: 1

Kamran Khatti
Kamran Khatti

Reputation: 4127

You can do something

assume that response is any API response

obj: any; // you can create interface and add type

response = {
  "id": "x1",
  "severity": 100,
  "timestamp": 1599230966,
  "attr1": "...",
  "attr2": "...",
  "origin": [{
     "id": "x3",
     "severity": 75,
     "timestamp": 1599230366,
     "attr1": "...",
     "origin": [{
        "id": "x2",
        "severity": 50,
        "timestamp": 1599229766,
        "attr1": "...",
        "attr2": 555,
        "attr3": "...",
        "origin": []
    },
    {
        "id": "x1",
        "severity": 25,
        "timestamp": 1599229166,
        "attr1": "...",
        "origin": []
    }
  ]
}]

assign response to your class variable so that you can access it from template

ngOnInit() { 
  this.obj = response
}

or in any method where you are getting response

fetch() {
 // some logic to get api response

 // assign response to obj
 this.obj = response
 }

In template you can access complete boject

<div> {{ obj.id }} </div>

Iterate over array of object

<div *ngFor="let origin of obj.origin"> 
  {{ origin.id }}
  {{ origin.severity }}
  {{ origin.timestamp }}
  ....
</div>

Upvotes: 0

Vojtone
Vojtone

Reputation: 147

I'd add to @A.khalifa response that, you can use JSON.parse() to turn this JSON into an object.

Upvotes: 0

Related Questions