CODEWITHSUNDEEP
javascriptjsonangular
Mohib Shaik
Mohib Shaik

Reputation: 11

How to Create model file for nested JSON in angular 8

I want to create model file for Nested JSON in angular 8 . As I'm new to Angular Development had no idea how to do it .

my Api response looks like :

{
   "data": [{
      "nationalCustomerId": 31,
      "nationalCustomerName": "Family Dollar",
      "stores": [{
            "categories": [{
               "category": "Dairy",
               "categoryId": 1
            }],
            "storeId": 18627,
            "storeNumber": 3367
         },
         {
            "categories": [{
               "category": "Dairy",
               "categoryId": 1
            }],
            "storeId": 25540,
            "storeNumber": 10164
         },
         {
            "categories": [{
               "category": "Dairy",
               "categoryId": 1
            }],
            "storeId": 25735,
            "storeNumber": 10783
         },
         {
            "categories": [{
               "category": "Dairy",
               "categoryId": 1
            }],
            "storeId": 26971,
            "storeNumber": 11374
         }
      ]
   }],
   "status": "success"
}

Any help is appreciated.. I want to create a model file for above API response in angular 8.

Upvotes: 0

Views: 2206

Answers (2)

JMP
JMP

Reputation: 1934

The model classes could look like this:

export class Response {
    data: Customer[];
    status: string;
}

export class Customer {
    nationalCustomerId: number;
    nationalCustomerName: string;
    stores: Store[];
}

export class Store {
    storeId: number;
    storeNumber: number;
    categories: Category[];
}

export class Category {
    category: string;
    categoryId: number;
}

To keep them organised, have them as separate files and import as needed to reference them, e.g:

In a file called store.ts (that has the Store class definition):

//if your Category model class is in same folder and called category.ts
import { Category } from './category';

Then you can import the outer 'data' class to the file where you need to map the response with e.g:

import { Response } from '<some path to your model classes folder>/response';

Upvotes: 1

Jasdeep Singh
Jasdeep Singh

Reputation: 8311

you can create a typescript file(let say response.ts) and keep you data there like

export const response = {
  "data": [
    {
      "nationalCustomerId": 31,
      "nationalCustomerName": "Family Dollar",
      "stores": [
        {
          "categories": [
            {
              "category": "Dairy",
              "categoryId": 1
            }
          ],
          "storeId": 18627,
          "storeNumber": 3367
        },

        {
          "categories": [
            {
              "category": "Dairy",
              "categoryId": 1
            }
          ],
          "storeId": 25540,
          "storeNumber": 10164
        },


        {
          "categories": [
            {
              "category": "Dairy",
              "categoryId": 1
            }
          ],
          "storeId": 25735,
          "storeNumber": 10783
        },



        {
          "categories": [
            {
              "category": "Dairy",
              "categoryId": 1
            }
          ],
          "storeId": 26971,
          "storeNumber": 11374
        }
      ]
    }
  ],
  "status": "success"
}

After this you can import this data in any file using the below import statement.

import {response} from 'path of file where it is kept'

Upvotes: 0

Related Questions