How to create an interface for object and array of objects in Angular 8 and type script?

Question

I'm trying to create an interface for Object, objects, and array of objects.

Sample interface

export interface ErateColumn {
  categories:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

Sample API response like this

{
"categories": {
    "Basic Information": [
        { label: "Applicant Type", value: "ApplicantType" },
        { label: "Organization Name", value: "OrganizationName" },
    ],
    "FRN Lineitem": [
        { label: "Monthly_Cost", value: "Monthly_Cost" },
        ],
    "FRN status": [
        { label: "Purpose Type", value: "PurposeType" },

    ]
}
}

Parth Savaliya · Accepted Answer · 2020-02-20 06:27:29Z

1

what you have provided in this._erateColumn.next(columnList) method is columnList. And somehow columnList seems to be a single object of the interface ErateColumn, While your BehaviorSubject has type array of ErateColumn. Change that to ErateColumn or provide array in this._erateColumn.next(columnList) method for your code to work.

EDIT

According to the new screenshot of yours, it says property categories is missing so either make it optional like this

export interface ErateColumn {
  categories?:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

or provide categories.

answered Feb 20, 2020 at 6:27

Parth Savaliya

3616 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karthik Saravanan Over a year ago

#Parth Savaliya, I'have changed to private readonly _erateColumn = new BehaviorSubject<ErateColumn>({} as ErateColumn) error gone. thanks for your help. Ref: stackoverflow.com/questions/42091602/…

Parth Savaliya Over a year ago

I'll still suggest you make fields optional rather than using your approach

Sameer · Accepted Answer · 2020-02-20 06:46:58Z

0

May be this approach can help someone

You can convert JSON to typescript's class or interface, Using online tool json2ts or if you are using vs code (Visual Studio) use this extension QuickType - Paste JSON as Code

Note: Your JSON should be a valid JSON otherwise you will get errors

answered Feb 20, 2020 at 6:46

Sameer

5,2363 gold badges27 silver badges47 bronze badges

Comments

Aish Anu · Accepted Answer · 2020-02-20 06:59:50Z

0

Hope this helps...

interface User {
   name: string;
   phone: string;
}

const user: User ==> Object

const usersList: User[] ===> Array of Objects

answered Feb 20, 2020 at 6:59

Aish Anu

1,6221 gold badge10 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to create an interface for object and array of objects in Angular 8 and type script?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related