How to define a nested object within model? (angular2/typescript)

ng model nested object angular2
how to access nested json object in angular 6
angular interface nested object
nested object typescript
angular model for nested json
angular access nested object
how to create nested json object in angular 6
how to display nested json data in angular

I'm playing around with Angular2, and was hoping someone could offer some advice on how to achieve this;

For example, if my model currently looks like this for an employee:

export class Employee {
    constructor(
        public firstName: string,
        public lastName: string,
        public email: string,
        public days: string,
        public hours: string, 
    ){}
}

and I want to to place days/hour into their own object, how could that be achieved?

(i.e like..)

public availability: {
        public days: string,
        public hours: string
},

and then would the http get request stay the same like below?

getEmployees() {
      return this.http.get('...')
             .map((response: Response) => {
                 const data = response.json().obj;
                 let objs: any[] = [];

                 for(let i = 0; i < data.length; i++) {
                     let employee = new Employee(
                     data[i].firstName,
                     data[i].lastName, 
                     data[i].email, 
                     data[i].availability.days,
                     data[i].availability.hours
                     );

                     objs.push(employee)
                 }
                 return objs
             })
          }

Just to clarify, I would like my get request to return something like;

var obj = {
    firstName: "test",
    lastName: "test",
    email: "test",
    availability: {
      days: "test",
      hours: "test"
    }
  }

Hope someone can help out! I'm tried to look around, but haven't come across anything that can help.


Something like this

export class Employee {
    constructor(
        public firstName: string,
        public lastName: string,
        public email: string,
        public availability: Availability // refer to type Availability  below
    ){}
}

export class Availability {
    constructor(
        public days: string,
        public hours: string
    ){}
}

Http get request should stay the same, then change on how you create new instance of employee

let employee = new Employee(
    data[i].firstName,
    data[i].lastName,
    data[i].email,
    new Availability(
          data[i].availability.days,
          data[i].availability.hours
    )
);

How to define a nested object within model? (angular2/typescript), I'm playing around with Angular2, and was hoping someone could offer some advice on how to achieve this;. For example, if my model  Instead you can use nested form groups that make it easy to understand and prevent you from having a large flat object to use in your bindings. So let’s see how we should do it properly. Let’s assume we have a form to let user select some services they want to purchase as part of a package.


Personally I did ( for Ionic project ) something like

export class Availability {
    days: string  = "";
    hours: string = "";
}

export class Employee {
    firstName: string = "";
    lastName:  string = "";
    email:     string = "";

    availability = new Availability()
}

So if I use these models in a <form> I receive an empty structure of this Employee class.

It also work when I declare variables like employeeObservable : Observable<Employee[]>; when I query a firebase DB for example ...

How to Build Nested Model-driven Forms in Angular 2 ― Scotch.io, What is a Nested Form? Our Demo Application; Introduction; App Setup; The App Component; The HTML View; Part 1:  If you need to use some JavaScript and don’t have time to define it, this is where you start. You can back-fill the definition later on and the compiler will start to warn you if anything you are using doesn’t match up. Step 3 – Options. I normally recommend that you define the stuff you use first.


For anyone showing up to this a couple years later, there's a helpful library that can help with this called class-transformer.

Using this library has been the easiest: https://github.com/typestack/class-transformer

import { Type } from 'class-transformer';

export class Employee {
    firstName: string;
    email: string;
    days: string;
    hours: string;

    @Type(() => Availability)
    availablity: Availablity

    constructor(args: Employee) {
      Object.assign(this, args);
    }
}

export class Availability {
    days: string;
    hours: string;

    constructor(args: Availability) {
      Object.assign(this, args);
    }
}

A few things changed:

  1. The use of the @Type decorator comes from the class-transformer module. This allows you to transform nested objects. Here is the documentation: https://github.com/typestack/class-transformer#working-with-nested-objects
  2. We've added a constructor which allows you to create instances of these Classes and pass through attributes to them of their own respective types. Take a look at this post Converting httpClient answer to model objects [Angular 6] as it shines more light onto whats happening here.

Then within your service this is how your code changes:

import { plainToClass } from 'class-transformer';
import { Employee } from './Employee'

getEmployees() {
  return this.http.get('...')
    .map((response: Response) => plainToClass(Employee, response.json().obj as Employee[]))

plainToClass will take the raw JSON response and transform it into instances of your Employee Class. If you console.log out the result of getEmployees() you will see that it returns an Array of Employees that each have an attribute called availability of type Availability.

I changed my implementation of an EXTREMELY deeply nested , Refactor the way the Reactive Form is generated in TypeScript. The Interfaces that we created for the Data Models based on the JSON Data To tackle the deeply nested object arrays in our API response, we'll create methods that would you can then specify the changeDetection to be ChangeDetectionStrategy. In TypeScript, there is no exlicit concept like inner classes. You can achieve something similar by merging a class with a module containing the inner class. The merging happens implicitely by using the same name for the class and the module. The only downside here is that


Nested Objects, Nested Objects. Immutable.Map wraps objects shallowly, meaning if you have an object with properties bound to mutable types then those properties can be  tsconfig.json is a JSON file that is used to define how the TypeScript compiler compiles TypeScript code of project file to JavaScript code . This file should be located in the root folder of the project. We need to run tsc command within the root folder of the project.


Angular 5 - Reading data from Nested JSON, Am facing pblm reading data from nested JSON and loading to a ngx_table. arrCase = data as object []; // FILL THE ARRAY WITH DATA. The object-based value behaves differently in this regard. Whether you change the nested or the MyCtrl scopes input fields, the changes will stay in sync. In Angular, a scope prototypically inherits properties from a parent scope.


Angular 7 models, How to implement models in Angular 7. We've got two objects here which will be mapped to proper model objects; the user itself and its cars (plural!) All the user interactions within our template are now an instance of our User object (and every users cars are an instance of Car ) - meaning we could use  Get and Set Nested Objects with JavaScript Building Resilient Systems on AWS : Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS. By David Walsh on August 10, 2015