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

Question

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

Supamiu · Accepted Answer · 2016-10-04 14:27:55Z

11

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[];
}

edited Oct 4, 2016 at 14:27

answered Oct 4, 2016 at 14:12

Supamiu

8,7417 gold badges47 silver badges79 bronze badges

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

7 Comments

Malik Kashmiri Over a year ago

these class are in different .ts files how to i refereed it in product

Trong Lam Phan Over a year ago

In ProductModel ts file, you need to "import { Api } from './api'" for example

Supamiu Over a year ago

Oh yes sorry, sicne it was an example wrote by hand I did not added the imports.

Keerthi Reddy Yeruva Over a year ago

Hi, I too have same type of structure. what if i want to display it? I tried{{product.Api.id}} but it's not working. can anyone help @TrongLamPhan

Supamiu Over a year ago

@KeerthiReddyYeruva Api doesn't exist as a field in the structure, you need to use Apis array, example for the id of the first Api: product.Apis[0].id

|

Collectives™ on Stack Overflow

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

Response

Api

Product

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Response

Api

Product

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related