Enforced data type for JSON file

Question

Enforced data type for JSON file

After retrieving data from the JSON file, I start by creating a class and defining all the variables obtained in the JSON for strict data typing. For example, my JSON file looks like this:

 {"fname":"Mark","lname":"jhony"}

In Angular, I define the class as follows:

export class user{
 fname: string;
 lname : string;
}

However, I am facing confusion on how to structure the class for the following JSON data:

{"fname":"Mark","lname":"jhony",
 "parcels":[
   {
    "parcelId":123,
    "parcelName":"asd",
    "parcelItems:[
       { 
        "itemId":2,
        "itemName":"perfume"
       },
       { 
         "itemId":4,
         "itemName":"soap"
       }
     ]
]}

I have attempted to include arrays in the class but I am struggling to determine the best approach to handle it in AngularJS.

angularjs json typescript

Answer 1

Answer №1

One common practice is to utilize an interface to define a structure for storing basic values, like in the following example:

interface ProductInfo {
  productId: number;
  productName: string;
}
interface Product {
  productID: number;
  productName: string;
  productItems: ProductInfo[];
}
interface Customer {
  firstName: string;
  lastName: string;
  Products: Product[];
}

When retrieving and parsing JSON data, you can specify the interface to use based on your needs. A simple way to achieve this would be:

const customer = JSON.parse(customerJson) as Customer;

If you prefer to work with a class to include additional methods for handling data, you will need to create an instance of the class using a constructor. This process may look like:

const customerValues = JSON.parse(customerJson);
const customer = new Customer(customerValues);

Answer 2

One common practice is to utilize an interface to define a structure for storing basic values, like in the following example:

interface ProductInfo {
  productId: number;
  productName: string;
}
interface Product {
  productID: number;
  productName: string;
  productItems: ProductInfo[];
}
interface Customer {
  firstName: string;
  lastName: string;
  Products: Product[];
}

When retrieving and parsing JSON data, you can specify the interface to use based on your needs. A simple way to achieve this would be:

const customer = JSON.parse(customerJson) as Customer;

If you prefer to work with a class to include additional methods for handling data, you will need to create an instance of the class using a constructor. This process may look like:

const customerValues = JSON.parse(customerJson);
const customer = new Customer(customerValues);

Answer 3

Answer №2

Yes, this solution appears to be effective.

export interface BaggageItemType {    
    itemNumber: number;
    itemName: string;
}

export interface BaggageType {
    baggageId: number;
    baggageName: string;
    baggageItems: BaggageItemType[];
}

export interface UserType {
   firstName: string;
   lastName: string;
   baggages: BaggageType[];
}

Answer 4

Yes, this solution appears to be effective.

export interface BaggageItemType {    
    itemNumber: number;
    itemName: string;
}

export interface BaggageType {
    baggageId: number;
    baggageName: string;
    baggageItems: BaggageItemType[];
}

export interface UserType {
   firstName: string;
   lastName: string;
   baggages: BaggageType[];
}

Enforced data type for JSON file

Answer №1

Answer №2

Similar questions

Error occurred during the Uglify process: Unable to access the 'kind' property as it is undefined

Using a dynamic template URL in a directive

Display a table in the Bot emulator with fields populated by values of class objects

Error in AngularJS when attempting to use an expression as a parameter for a function, resulting in a syntax parse

Using npm to install angular-jsdoc

Options for caching in Angular

Include JSON elements in the ajaxSubmit function

React-Router's Seamless Deep Sub-Route Redirect Functionality

Enhancing server-generated content with AngularJS

Show just a single error message if there are two validation errors present

Troubleshooting the problem of page refreshing in an Angular JS application

Ensure the security of a generic type's value by enforcing type safety

Trouble seeing span in ion-item in Ionic 2: How can I display plain text instead?

What is the process for utilizing AngularJS's multiple $http calls to retrieve data from a single PHP file?

I am looking to convert the input format of a timepicker using moment.js to display as 12:38:07 instead of 2018-01-23T12:38:07.439Z

"The use of an angular variable to create dynamic HTML content

Use Staxon to transform JSON into XML format using Java

Display a recurring list within an Ionic Pop Up

Locating the JSON path within an object

Creating a web layout or template using HTML