Is it possible in Angular Typescript to map the attributes of an array to a class object or generate a new object using the elements of the array?

Here are the specifications of the tools I am currently using:

Angular CLI: 10.0.6

Node: 12.18.2

Operating System: win32 x6

Angular Version: 10.0.10

My goal is to retrieve selected rows from ag-grid using a specific method.

When I retrieve the row, it looks like this:

https://i.sstatic.net/GdsMd.png

This row contains various data points, and I have a class named Summary with 22 attributes that correspond to each element in this array.

For example:

export class Summary {

  constructor(
    public date: Date,
    public name: string,
    public myNum: string,
    public entity: string,
    // other attributes 
  ) {

  }
}

Essentially, the array row and the Summary object have the same attributes.

I need to convert the array row into a Summary object so that I can send it as an HTTP request (the Rest API accepts a List as a request object).

Is there a specific way to achieve this?

Answer №1

In my approach, I suggest the following implementation:

It is crucial that the column index consistently corresponds to the respective field being referenced.

Here is the structure of the class:

export class Summary {
  
    public date: Date;
    public name: string;
    public myNum: string;
    public entity: string;
    ...

  constructor(args:any[]) {
    this.date = args[0];
    this.name = args[1];
    ...
  }
}

This implementation is written in TypeScript (ts):

const summary = new Summary(row)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the Art of Handling Postgres Error Messages for Accurate Query Execution

Currently, I am utilizing pg and node.js. The issue arises when a user logs in through the auth0 widget, as I am passing the returned email to check against my database for existing users. If the user does not exist, I am inserting their information into t ...

Consolidating repeated data objects found in the response

After receiving an API response, the data looks like this: response = [ { id: 1, val: 'A', date: '28/03/2021', versions: [] }, { id: 1, val: 'B', date: '29/03/2021', versions: [] }, { id: 1, val: 'C', ...

Encountered an issue in Angular 6: Unable to access property '0' of undefined

There's an error popping up in the console saying, Cannot read property '0' of undefined, but surprisingly I'm still getting the expected result. Below is my HTML code snippet: <div class="col-md-3"> <div class="slider-prod ...

Tips for dynamically adding an object to the formArrayName in Angular reactive forms

Currently, I am facing an issue with loading my array of objects response into a multiselect using ng-select. The structure of my response data looks like this: The formModel setup in my code is as follows: clientForm = this.fb.group({ custom : this. ...

Converting a TypeScript class to a plain JavaScript object using class-transformer

I have a few instances of TypeScript classes in my Angular app that I need to save to Firebase. However, Firebase does not support custom classes, so I stumbled upon this library: https://github.com/typestack/class-transformer which seems to be a good fit ...

Getting the checked values from an AngularJS Material checkbox

<md-checkbox ng-repeat="program in ctrl.programs" ng-model="ctrl.programsSelected[program.id]"> {{program.name}} </md-checkbox> Checked Items: {{ctrl.programsSelected | json}} Current Output: Checked Items: [null,true,true,true,null,true, ...

Experiencing complications with an Angular 2 router

When a user logs into the system, they are greeted with a navigation bar featuring options like Dashboard, Customers, and Product. Below is an excerpt from my routes file: app.routing.ts export const router: Routes = [ { path: '', redir ...

Encountering issues in d3.js following the transition to Angular 8

After upgrading my Angular 4 app to Angular 8, I encountered an issue where the application works fine in development build but breaks in production build. Upon loading the application, the following error is displayed. Uncaught TypeError: Cannot read p ...

Creating getter and setter functions for an input field model property in Angular

I need help creating getter and setter methods for an input field property. Here is my attempted code: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', st ...

The type 'Argument of (props: ITableProps) => JSX.Element' cannot be assigned to the parameter type of... - React High Order Component

One of the tools I have in my arsenal is a loader HOC This is how the HOC looks like: const withLoader = <P extends object>(WrappedComponent: new () => React.Component<P, any>, loading: boolean) => { return class WithLoading extends ...

Encountering an issue while trying to convert a JSON object into an array of a specific class type

When I receive a JSON object from a service, I want to iterate through this object and populate an array of class types. Below is the code used to call the service: public GetMapData(): Observable<Response> { var path = 'http://my.blog.net ...

How can a default value be assigned to an ag-Grid filter?

Is there a way to set a default value in ag-grid filter text that is displayed to the user but not applied to the actual results? this.columnDefs = [ { headerName: this.pageData["tbm.line.list.grid.phonenumber"], field: 'tn', /*sor ...

Guide to automatically blur the input field and toggle it upon clicking the checkbox using Angular

<input (click)="check()" class="checkbox" type="checkbox"> <input [(ngModel)]="second_month" value="2019-09" type="month" [class.blurred]="isBlurred">> I need the second input(type=month) field to be initially blurred, and only unblur ...

Utilize a two-dimensional array of text elements to output to a file

Currently, I am in the process of creating a straightforward EPOS system that can keep track of inventory and handle transactions efficiently. My main focus right now is on exporting the data from my arrays (Product, Price, Size, Stock Level) to a file usi ...

Modules failing to load in the System JS framework

Encountering a puzzling issue with System JS while experimenting with Angular 2. Initially, everything runs smoothly, but at random times, System JS struggles to locate modules... An error message pops up: GET http://localhost:9000/angular2/platform/bro ...

Rendering HTML content in a preformatted <code> tag using Electron

Recently, a brand new electron/angular application was built with the code snippet running in main.ts: win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })); After launc ...

What steps can I take to ensure that a JavaScript function does not execute when a DOM element from an array has already been chosen?

I am facing an issue with a script that dynamically changes the header based on the selected bubble in an array. The problem arises when the user clicks on the same bubble that is already selected, causing the JavaScript function to run and temporarily cha ...

Having trouble troubleshooting React Typescript in Visual Studio Code?

I am currently facing a challenge while debugging a React Typescript application in VS Code. I am struggling to configure the launch.json file in order to enable TSX debugging. For bundling everything into a single JS file, I am utilizing webpack. Below ...

Angular CLI's selection of third-party libraries that are not available on npm repositories

Currently in the process of migrating an app from Angular 2 to Angular CLI Now facing the challenge of importing 3rd party libraries like orbitcontrols.js that are not available on npm or bower. After researching on https://github.com/angular/angular-cli ...

Encountering a Template Parse Error after running the ng build --prod command

As a newcomer to Angular, I have successfully created a small application that requires a sortable table. Everything works well in Angular-cli development server during development mode (using ng serve). I've experimented with implementing the table ...