Malik Kashmiri Malik Kashmiri - 2 months ago 16
TypeScript Question

how to create Model in angular 2 with array of object in it

I am trying to create a model for this response to store data into model and the use it as required

Response



[
{
"Id": 0,
"ApimId": "5746ebcfcd7c3209247edc40",
"Name": "Atea Service Desk",
"Description": "Service Desk and Operations",
"SubscriptionRequired": false,
"ApprovalRequired": false,
"State": "published",
"Apis": [
{
"Id": 0,
"ApimId": "5746ba28804136004d040001",
"Name": "Echo API",
"Description": null,
"ServiceUrl": "http://echoapi.cloudapp.net/api",
"ScopeId": 0,
"WorkflowId": 0,
"Workflow": null,
"Scope": null,
"CreatedDate": "2016-10-04T18:49:32.2553822+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.2553822+05:00",
"UpdatedBy": "LHR\\ahja"
},
{
"Id": 0,
"ApimId": "574c167dcd7c3216c8c633b3",
"Name": "Servicedesk and Operations",
"Description": "Atea Servicedesk and Operations Internal API",
"ServiceUrl": "http://dev-endpoint.atea.com/RFC",
"ScopeId": 0,
"WorkflowId": 0,
"Workflow": null,
"Scope": null,
"CreatedDate": "2016-10-04T18:49:32.2564039+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.2564039+05:00",
"UpdatedBy": "LHR\\ahja"
},
{
"Id": 0,
"ApimId": "574eb044cd7c320600975d85",
"Name": "Swagger Petstore",
"Description": "This is a sample server Petstore server. You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/). For this sample, you can use the api key `special-key` to test the authorization filters.",
"ServiceUrl": "http://petstore.swagger.io/v2",
"ScopeId": 0,
"WorkflowId": 0,
"Workflow": null,
"Scope": null,
"CreatedDate": "2016-10-04T18:49:32.2574041+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.2574041+05:00",
"UpdatedBy": "LHR\\ahja"
},
{
"Id": 0,
"ApimId": "574eb27fcd7c320600975d86",
"Name": "Swagger Petstore API",
"Description": "This API is design by Swagger.io",
"ServiceUrl": "http://petstore.swagger.wordnik.com/api",
"ScopeId": 0,
"WorkflowId": 0,
"Workflow": null,
"Scope": null,
"CreatedDate": "2016-10-04T18:49:32.2584048+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.2584048+05:00",
"UpdatedBy": "LHR\\ahja"
}
],
"CreatedDate": "2016-10-04T18:49:32.2594056+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.2594056+05:00",
"UpdatedBy": "LHR\\ahja"
},
{
"Id": 0,
"ApimId": "57eb9930cd7c320760ee317e",
"Name": "Non Workflow",
"Description": "Workflow not applied to the contained APIs",
"SubscriptionRequired": false,
"ApprovalRequired": false,
"State": "published",
"Apis": [
{
"Id": 0,
"ApimId": "574eb044cd7c320600975d85",
"Name": "Swagger Petstore",
"Description": "This is a sample server Petstore server. You can find out more about Swagger at [http://swagger.io](http://swagger.io) or on [irc.freenode.net, #swagger](http://swagger.io/irc/). For this sample, you can use the api key `special-key` to test the authorization filters.",
"ServiceUrl": "http://petstore.swagger.io/v2",
"ScopeId": 0,
"WorkflowId": 0,
"Workflow": null,
"Scope": null,
"CreatedDate": "2016-10-04T18:49:32.8218186+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.8218186+05:00",
"UpdatedBy": "LHR\\ahja"
},
{
"Id": 0,
"ApimId": "574eb27fcd7c320600975d86",
"Name": "Swagger Petstore API",
"Description": "This API is design by Swagger.io",
"ServiceUrl": "http://petstore.swagger.wordnik.com/api",
"ScopeId": 0,
"WorkflowId": 0,
"Workflow": null,
"Scope": null,
"CreatedDate": "2016-10-04T18:49:32.8228184+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.8228184+05:00",
"UpdatedBy": "LHR\\ahja"
}
],
"CreatedDate": "2016-10-04T18:49:32.8238186+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:32.8238186+05:00",
"UpdatedBy": "LHR\\ahja"
},
{
"Id": 0,
"ApimId": "5746ba28804136004d060001",
"Name": "Starter",
"Description": "Subscribers will be able to run 5 calls/minute up to a maximum of 100 calls/week.",
"SubscriptionRequired": false,
"ApprovalRequired": false,
"State": "notPublished",
"Apis": [],
"CreatedDate": "2016-10-04T18:49:33.4234324+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:33.4234324+05:00",
"UpdatedBy": "LHR\\ahja"
},
{
"Id": 0,
"ApimId": "5746ba28804136004d060002",
"Name": "Unlimited",
"Description": "Subscribers have completely unlimited access to the API. Administrator approval is required.",
"SubscriptionRequired": false,
"ApprovalRequired": false,
"State": "published",
"Apis": [
{
"Id": 0,
"ApimId": "5746ba28804136004d040001",
"Name": "Echo API",
"Description": null,
"ServiceUrl": "http://echoapi.cloudapp.net/api",
"ScopeId": 0,
"WorkflowId": 0,
"Workflow": null,
"Scope": null,
"CreatedDate": "2016-10-04T18:49:33.9833659+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:33.9833659+05:00",
"UpdatedBy": "LHR\\ahja"
}
],
"CreatedDate": "2016-10-04T18:49:33.9843647+05:00",
"CreatedBy": "LHR\\ahja",
"UpdatedDate": "2016-10-04T18:49:33.9843647+05:00",
"UpdatedBy": "LHR\\ahja"
}
]


I have created two class one is Product and other is Api. Below is my implementation foe these classes.

Api



export class ApiModel {
public ProductId: number;
public Apim: string;
public Name: string;
public Description: string;
public ServiceUrl: string;
public WorkflowId: number;
public ScopeId: number;
}


Product



export class ProductModel {
public Id: number;
public Apim: string;
public ApprovalRequired: boolean;
public Name: string;
public Description: string;
public ServiceUrl: string;
public State: string;
public SubscriptionRequired: boolean;
public Apis: Array<any>;
}


Now my question is that It store the response in it. e.g Product have many Apis in it. and if I want to get all the apis in the same product

Answer

You can set object array type using ClassName[]:

export class Api{
    Id: 0;
    ApimId: string;
    Name: string;
    Description: string;
    ServiceUrl: string;
    ScopeId: number;
    WorkflowId: number;
    Workflow: any;
    Scope: any;
    CreatedDate: string;
    CreatedBy: string;
    UpdatedDate: string;
    UpdatedBy: string;
}

And then in your ProductModel:

import {Api} from './api';
export class ProductModel {
    public Id: number;
    public Apim: string;
    public ApprovalRequired: boolean;
    public Name: string;
    public Description: string;
    public ServiceUrl: string;
    public State: string;
    public SubscriptionRequired: boolean;
    public Apis: Api[];
}