Starting object arrays in Angular 6 using ES6

Question

Starting object arrays in Angular 6 using ES6

As someone who is just starting out with javascript, I have encountered a challenge with a nested class structure. Specifically, I am looking to initialize an array of EventDate objects and assign it to 'this.dates' within the CustomerEvents constructor using a json object.

export default class CustomerEvent {
    constructor(customer_event: any) {
        this.event_title = customer_event.event_title;
        this.customer = customer_event.customer;
        this.total_budget = customer_event.total_budget;
        this.no_of_people = customer_event.no_of_people;
        // How can I initiate array of EventDate objects and assign to this.dates?
        this.dates = /**array of new EventDate(customer_event.dates) **/;
    }
    event_title: string;
    customer: Customer;
    total_budget: number;
    no_of_people: number;
    dates: EventDate[];

}

class EventDate {
    constructor(date: any) {
        this.start_date = date.start_date;
        this.end_date = date.end_date;
    }
    start_date: Date;
    end_date: Date;
}

If anyone could provide guidance on this matter, it would be greatly appreciated. Thank you!

javascript angular typescript class es6-class

Answer 1

Answer №1

To create a new empty array, simply do the following:

constructor(new_customer_event: any) {
  this.event_title = new_customer_event.event_title;
  this.customer = new_customer_event.customer;
  this.total_budget = new_customer_event.total_budget;
  this.no_of_people = new_customer_event.no_of_people;
  this.dates = [];
}

If you want to convert an incoming array, use the following method:

...
this.dates = new_customer_event.dates.map(date => new EventDate(date));
...

Answer 2

To create a new empty array, simply do the following:

constructor(new_customer_event: any) {
  this.event_title = new_customer_event.event_title;
  this.customer = new_customer_event.customer;
  this.total_budget = new_customer_event.total_budget;
  this.no_of_people = new_customer_event.no_of_people;
  this.dates = [];
}

If you want to convert an incoming array, use the following method:

...
this.dates = new_customer_event.dates.map(date => new EventDate(date));
...

Answer 3

Answer №2

The Angular Style Guide emphasizes the use of interfaces for defining data models over classes:

It is recommended to utilize interfaces for data models.

So, when modifying your code, consider structuring it like this:

export interface EventDate {
  start_date: Date;
  end_date: Date;
}

export interface CustomerEvent {
  event_title: string;
  customer: Customer;
  total_budget: number;
  no_of_people: number;
  dates: EventDate[];
}

For initializing, you can follow this approach:

const customerEvent: CustomerEvent = {
  event_title: 'Some Event',
  customer: { /*An Object representing a Customer Type*/ }
  total_budget: 123,
  no_of_people: 456,
  dates: [{
    start_date: new Date(),
    end_date: new Date()
  }]
};

Answer 4

The Angular Style Guide emphasizes the use of interfaces for defining data models over classes:

It is recommended to utilize interfaces for data models.

So, when modifying your code, consider structuring it like this:

export interface EventDate {
  start_date: Date;
  end_date: Date;
}

export interface CustomerEvent {
  event_title: string;
  customer: Customer;
  total_budget: number;
  no_of_people: number;
  dates: EventDate[];
}

For initializing, you can follow this approach:

const customerEvent: CustomerEvent = {
  event_title: 'Some Event',
  customer: { /*An Object representing a Customer Type*/ }
  total_budget: 123,
  no_of_people: 456,
  dates: [{
    start_date: new Date(),
    end_date: new Date()
  }]
};

Answer 5

Answer №3

Generate these examples manually:

initializeEvent(customer_event: any) {
    this.event_title = customer_event.event_title;
    this.customer = customer_event.customer;
    this.total_budget = customer_event.total_budget;
    this.no_of_people = customer_event.no_of_people;
    this.dates = customer_event.dates.map(date => new EventDate(date));
}

Answer 6

Generate these examples manually:

initializeEvent(customer_event: any) {
    this.event_title = customer_event.event_title;
    this.customer = customer_event.customer;
    this.total_budget = customer_event.total_budget;
    this.no_of_people = customer_event.no_of_people;
    this.dates = customer_event.dates.map(date => new EventDate(date));
}

Starting object arrays in Angular 6 using ES6

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to dynamically load a view within a modal based on the clicked link?

Obtaining a 16-bit integer from the response of an LWIP server

Executing operations on subdocuments in Mongoose without having to fetch the parent

What is the process of turning an SVG element into a clickable link?

Escape from an iframe with the help of a buster

I am having an issue with my registration form in node.js where it does not redirect after submitting

An ajax call triggers a 500 error response when initiated within another ajax call

Adding items to a JSON document

Pressing the HTML button will reveal the cart details in a fresh display box

.ajax() triggers a page refresh upon pressing the ENTER key

Validate if the translation file exists in ngx-translate

Adjustable Bootstrap Progress Bar - Modify element width on the fly

The date format being sent by Angular to Java is incorrect, resulting in the inability to create an object in the

Error encountered during Atom execution - The command '/usr/bin/env: 'node' was not found in the directory

Encountered error message: "Cannot assign argument of type '() => () => boolean' to parameter of type 'EffectCallback'"

Include a thousand separator and round to two decimal places in the ngModel input

Breaking apart a mesh using THREE.js

Struggling to establish object notation through parent-child relationships in Angular 2

Use a jQuery or XPath selector to choose certain HTML tags from a list of HTML tags

The form fails to submit even after the validation process is completed