Utilize nested object models as parameters in TypeScript requests

Question

Utilize nested object models as parameters in TypeScript requests

Trying to pass request parameters using model structure in typescript. It works fine for non-nested objects, but encountering issues with nested arrays as shown below:

export class exampleModel{

    products: [
        {
            name: string,
            address:string,
            product_sizes: [
                {
                    quntity: number,
                    price: number,
                    id: [
                        number
                    ]
                }
            ]
        }
    ]

}

After creating the model, initializing it as follows:

  productRequestObject : exampleModel = <exampleModel>{}

Attempts to assign values result in an error:

    this.productRequestObject.products[0].name = sessionStorage.getItem('name')

Error message received:

Cannot read property '0' of undefined

Any suggestions or insights on what might be missing are greatly appreciated!

angular typescript api model

Answer 1

Answer №1

Start off by creating a blank object without any fields, such as projects. To properly handle this, it's best to first define interfaces and models. Then proceed to instantiate and piece them together like a puzzle based on their hierarchical structure.

Define the necessary interfaces in interfaces.ts

export interface IProductSize {
    quantity: number;
    price: number;
    id: Array<number>;
}

export interface IProduct {
    name: string;
    address:string;
    product_sizes: Array<IProductSize>;
}

export interface IRequest {
    products: Array<IProduct>;
}

export interface IExampleModel {
    requests: Array<IRequest>;
}

To complement this, define your classes in models.ts

export class ProductSize implements IProductSize {
    constructor(
        public quantity: number,
        public price: number,
        public id: Array<number>){}
}

export class Product implements IProduct {
    constructor(
        public name: string,
        public address:string,
        public product_sizes: Array<IProductSize>){}
}

export class Request implements IRequest {
    constructor(public products: Array<IProduct>){}
}

export class ExampleModel implements IExampleModel {
    constructor(public requests: Array<IRequest>){}
}

You can now proceed to construct your object.

let productSize: IProductSize = new ProductSize(0, 0, []);
let product: IProduct = new Product('', '', [productSize]);
let request: IRequest = new Request([product]);
let productRequestObject: IExampleModel = new ExampleModel([request]);

Finally, access the desired field

 this.productRequestObject.products[0].name = sessionStorage.getItem('name');

This method offers flexibility and complete control over each layer of your nested structure when working with Angular.

Answer 2

Start off by creating a blank object without any fields, such as projects. To properly handle this, it's best to first define interfaces and models. Then proceed to instantiate and piece them together like a puzzle based on their hierarchical structure.

Define the necessary interfaces in interfaces.ts

export interface IProductSize {
    quantity: number;
    price: number;
    id: Array<number>;
}

export interface IProduct {
    name: string;
    address:string;
    product_sizes: Array<IProductSize>;
}

export interface IRequest {
    products: Array<IProduct>;
}

export interface IExampleModel {
    requests: Array<IRequest>;
}

To complement this, define your classes in models.ts

export class ProductSize implements IProductSize {
    constructor(
        public quantity: number,
        public price: number,
        public id: Array<number>){}
}

export class Product implements IProduct {
    constructor(
        public name: string,
        public address:string,
        public product_sizes: Array<IProductSize>){}
}

export class Request implements IRequest {
    constructor(public products: Array<IProduct>){}
}

export class ExampleModel implements IExampleModel {
    constructor(public requests: Array<IRequest>){}
}

You can now proceed to construct your object.

let productSize: IProductSize = new ProductSize(0, 0, []);
let product: IProduct = new Product('', '', [productSize]);
let request: IRequest = new Request([product]);
let productRequestObject: IExampleModel = new ExampleModel([request]);

Finally, access the desired field

 this.productRequestObject.products[0].name = sessionStorage.getItem('name');

This method offers flexibility and complete control over each layer of your nested structure when working with Angular.

Utilize nested object models as parameters in TypeScript requests

Answer №1

Similar questions

Troubleshooting: Angular 6 issue - Unable to toggle visibility using ngIf

Service Injected into ng-template outlet context not defined

Effectively enhance constructor by incorporating decorators

Incompatibility Issues with TypeScript Function Overloading

Can *ngFor in Angular handle asynchronous rendering?

Troubles with implementing child routes in Angular 6

Enhancing the Look of Typeahead in ng-bootstrap

Ensuring Angular2 Javascript is validating only numerical input and not accepting characters

Launching npm start does not automatically open a browser tab

What is the best way to find out if multiples of a specific time interval can evenly divide the time between two

Dealing with a nested object problem in Angular using TypeScript

Creating a custom login directive in Angular 2 and utilizing location.createComponent for dynamic

Issue: ng test encountered a StaticInjectorError related to FormBuilder

The installation of Angular CLI through npm has unfortunately encountered an error

What is the best way to extract a property if it may be undefined?

Collection of personalized forms where the parent is a FormGroup

I possess information stored within the array object below, and I aim to transform it into a different array object format

Preventing the "Block-scoped variable used before its declaration" error in an Angular/TypeScript tree structure with child/parent references

Issue downloading file in Angular using Filesaver.js is causing problems

What are the benefits of reverting back to an Angular 1 directive instead of using an Angular 2 application