How to represent nested JSON in Angular Classes?

Question

I get this JSON from a server:

"Body": {
    "ErrorsContent": {
        "FunctionalError": [
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110902",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            },
            {
                "Code": "110900",
                "Error": "xx",
                "Position": "xx",
                "Value": ""
            }
        ]
    }
}

I need it to parse to an Angular object, so I created a couple classes:

export class Body{
    public ErrorsContent: ErrorsContent;
}

class ErrorsContent{
    public FunctionalError: FunctionalError;
}

class FunctionalError{
    public Code: any;
    public Error: any;
    public Position: any;
    public Value: any;
}

But this does not work fine when I have more than one FuntionalError.

How can I set the FuntionalError class so that I can have more than one error without being a class itself?

Any advice is welcome! Thanks.

The answer below is right, but I would also suggest you to 1) send your number values like Code as numbers and not as strings, 2) don't use the : any type. Give it the right one → In your case string or if you follow tip 1) also number — MauriceNino
– MauriceNino, Commented Sep 25, 2019 at 10:41
Use online helpers like jsontots.com to convert server responses to ts classes and avoid errors. — Iftifar Taz
– Iftifar Taz, Commented Sep 25, 2019 at 10:42
@MauriceNino +1 also properties name should start with lower case so for example Code should be code in classes as well as from server response — jitender
– jitender, Commented Sep 25, 2019 at 10:44
Thanks for the advices, but I receive the JSON from a remote server so I have nothing to do with that :) @MauriceNino — Iñigo
– Iñigo, Commented Sep 25, 2019 at 10:45

jitender · Accepted Answer · 2019-09-25 10:39:05Z

4

Change your ErrorsContent class to

class ErrorsContent{
    public FunctionalError: FunctionalError[];//it should be array 
}

answered Sep 25, 2019 at 10:39

jitender

10.4k1 gold badge21 silver badges49 bronze badges

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

2 Comments

Iñigo Over a year ago

What if the JSON comes with one FuntionalError and it is not inside [ ]?

jitender Over a year ago

@Iñigo i will not suggest you to do that there must be consistent format.For example you execute a foreach and you get and object instead of array your code will break

Iftifar Taz · Accepted Answer · 2019-09-25 10:47:30Z

3

FunctionalError is an array. You are declaring it as a object.

Use

class ErrorsContent {
    public FunctionalError: FunctionalError[];
}

instead of

class ErrorsContent {
    public FunctionalError: FunctionalError;
}

You can use any online tool to convert server JSON response to TS classes. Ex: jsontots, json2ts etc.

edited Sep 25, 2019 at 10:47

answered Sep 25, 2019 at 10:40

Iftifar Taz

8398 silver badges14 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-09-25 10:52:15Z

2

Try like this:

class ErrorsContent{
    public FunctionalError: Array<FunctionalError>;
}

answered Sep 25, 2019 at 10:52

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to represent nested JSON in Angular Classes?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

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

Related