Class/Interface model in angular 2, declaring an array of objects

Question

I need help understanding how to properly create a model class for the data I am using. I know what to do when it is just one array of objects which would be something like:

export class Education {
    complete: boolean;
    course: string;
}

for the json data:

{
  "educationData": [
    {
      "codeschool": [
        {
          "complete": "true",
          "course":"Front end foundations"
        },
        {
          "complete": "false",
          "course": "Front end formations"
        }
      ]
}

But suppose I am taking classes from another school and I have the following json data. I now have two arrays of objects within my educationData :

{
  "educationData": [
    {
      "codeschool": [
        {
          "complete": "true",
          "course":"Front end foundations"
        },
        {
          "complete": "false",
          "course": "Front end formations"
        }
      ],
      "egghead": [
        {
          "complete": "true",
          "course": "Getting started with angular"
        },
        {
          "complete": "true",
          "course": "Learn HTTP in angular"
        }
      ]
    }
  ]
}

Would I just leave the class model the same as

export class Education {
    complete: boolean;
    course: string;
}

Or do I now need to declare both the codeschool and egghead arrays? If this is the correct way to do it, then I know my syntax is completely wrong because I haven't been able to find much info on this type of case:

export class Education {
  codeschool: Array<Objects>;
    {
      complete: boolean;
      course: string;
    },
  egghead: Array<Objects>;
    {
      complete: boolean;
      course: string;
    }
}

JacobS · Accepted Answer · 2018-06-06 17:00:00Z

2

Given the JSON data you provided, I would most likely do something like this:

class Education {
    [key: string]: { complete: boolean, course: string }[]
}

The [key: string] portion is saying that you'll get keys, you don't know what they'll be exactly, but you know they'll be strings (the key holds no special meaning, but I like naming it that for clarity). After seeing this, I would most likely move those objects into their own class, so something like this:

class Education {
    [key: string]: EducationData[]
}

class EducationData {
    complete: boolean;
    course: string;
}

answered Jun 6, 2018 at 17:00

JacobS

6066 silver badges14 bronze badges

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

5 Comments

Cuong Vo Over a year ago

Idk if I am writing my code correct. When I try to compile I get an error from my http.get function saying - Property 'skillsData' does not exist on type 'Skills[]'. i basically copied and pasted your code but added export class to it.

Cuong Vo Over a year ago

it never works when I make my code this - .subscribe((skills: Skills[]) => this.skills = skills.skillsData)

Cuong Vo Over a year ago

but it works when i change it to - .subscribe((skills: any) => this.skills = skills.skillsData)

Cuong Vo Over a year ago

OK nevermind!! After messing with it I was able to figure out what the problem was. Your answer finally solved my issue!!! Ty so much!

Cuong Vo Over a year ago

my code should have been like this - .subscribe((skills: Skills) => this.skills = skills.skillsData)

Collectives™ on Stack Overflow

Class/Interface model in angular 2, declaring an array of objects

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related