Extracting a single property from an object and placing it into an array in Angular 2

Question

Extracting a single property from an object and placing it into an array in Angular 2

Here is the object structure that I am working with:

export class HourPerMonth {
    constructor(
        public year_month: string,
        public hours: string,
        public amount: string
    ) { };
}

My goal is to extract only the hours from this object and store them in an array.

private hourPerMonth: HourPerMonth[];
private hoursArray: Array<any>;

getChartData() {
    this.chartService.getHoursPerMonth().subscribe(source => {
        this.hourPerMonth = source;
        this.hoursArray = ?
    });
}

Any suggestions on how to achieve extracting the hours from the object into the hoursArray?

angular typescript

Answer 1

Answer №1

Utilize Array.prototype.map:

this.hoursArray = source.map(object => object.hours);

It can also be done this way:

private hoursArray: Array<string>;

Or in a simpler form:

private hoursArray: string[];

Answer 2

Utilize Array.prototype.map:

this.hoursArray = source.map(object => object.hours);

It can also be done this way:

private hoursArray: Array<string>;

Or in a simpler form:

private hoursArray: string[];

Answer 3

Answer №2

You can try this approach to solve your issue.

declare hourPerMonth: HourPerMonth[];
declare hoursArray: Array<any> = [];

fetchChartData() {
   this.chartService.fetchHoursPerMonth().subscribe(result => {
       this.hourPerMonth = result;
       this.hourPerMonth.forEach(hourItem => {
          this.hoursArray.push(hourItem.hours);
       }
   });
}

Answer 4

You can try this approach to solve your issue.

declare hourPerMonth: HourPerMonth[];
declare hoursArray: Array<any> = [];

fetchChartData() {
   this.chartService.fetchHoursPerMonth().subscribe(result => {
       this.hourPerMonth = result;
       this.hourPerMonth.forEach(hourItem => {
          this.hoursArray.push(hourItem.hours);
       }
   });
}

Extracting a single property from an object and placing it into an array in Angular 2

Answer №1

Answer №2

Similar questions

Issue with Formik Material UI Keyboard Date Picker not correctly formatting the text input

Obtaining data objects with Angular 2 from JSON

It is not possible to access an object's properties using bracket notation when the index is a variable

Issue encountered when using await in Tensorflow.js sample code with TypeScript

In Angular, the dropdown in reactive forms will not populate unless there is some interaction with the form

How can I bypass additional ngIf checks in the Angular template if a variable is null?

How can I gather information from members who have already signed up?

Ways to boost performance in an Angular 6.0 application

Execute a function that handles errors

What is the process of transforming two forms into components and then integrating those components into a view in Angular 5?

Navigating through multiple pages in Angular2 with Rails5

Issue: The code is throwing an error "TypeError: Cannot read property 'push' of undefined" in the JavaScript engine "Hermes

The different kinds of 'min' properties do not align. In this case, the type 'null' cannot be replaced with the type 'number' or 'undefined'

Customize column header values for Excel/CSV export with ag-grid

Trouble updating React Context state when attempting to utilize token from cookies

The TypeScript compiler remains silent when a declaration is missing

Select items displayed next to each other with varying number of columns in HTML

Edit the CSS styles within a webview

Require assistance with transforming a JSON string into an object

Challenges Faced with Implementing Active Reports in Angular 9