What is the best way to extract values from a specific table column and store them in an array using Angular?

Question

What is the best way to extract values from a specific table column and store them in an array using Angular?

I have a section of code containing a table in my component:

expect-next-month.component.html

        <table id="users">
            <tr>
                <th>Number of month</th>
                <th>Total checking electrical units</th>
                <th>Total assembly</th>
                <th>Total soldering</th>
                <th>Total packing</th>
                <th>Total working days in this month</th>
            </tr>
            <tr *ngFor="let sum of totalWorkPerMonth">
                <td>{{sum.number_of_month}}</td>
                <td>{{sum.total_checking_electrical_units}}</td>
                <td>{{sum.total_assembly}}</td>
                <td>{{sum.total_soldering}}</td>
                <td>{{sum.total_packing}}</td>
                <td>{{sum.total_working_days_in_this_month}}</td>
            </tr>
        </table>

The task at hand is to extract data from the total_packing column and store it in an array within the ts file for validation purposes. (This particular column consists of integer values).

I'm seeking guidance on accomplishing this. I attempted using ngModel, however without success. Any assistance would be greatly appreciated. Thank you!

angular typescript

Answer 1

Answer №1

1. One approach is to extract the data into a new array in your TypeScript file using the map function

var result = this.totalWorkPerMonth.map(x => x.total_packing)

// Perform verification for each item in your list:
result.foreach(packing => {
  // do something
}

2. Another method is to create a validation function for your attribute:

<td>{{validateField(sum.total_packing)}}</td>

In your .ts file:

 validateField(value: int) {
  // do something
  if (value < 0) return 0;
  else return value;
 }

3. The third solution, which I personally consider the most effective, involves conducting validation checks before rendering the results when receiving the data.

If you have a method getData() in your component and need to apply validation on a specific field:

getData() {
   service.getData().subscribe(data => {
      data.foreach(row => {
         // Conduct necessary validation as shown in example
         if (row.total_packing < 0) {
           row.total_packing = 0;
         }
      }
      this.totalWorkPerMonth = data;
   });
}

Answer 2

1. One approach is to extract the data into a new array in your TypeScript file using the map function

var result = this.totalWorkPerMonth.map(x => x.total_packing)

// Perform verification for each item in your list:
result.foreach(packing => {
  // do something
}

2. Another method is to create a validation function for your attribute:

<td>{{validateField(sum.total_packing)}}</td>

In your .ts file:

 validateField(value: int) {
  // do something
  if (value < 0) return 0;
  else return value;
 }

3. The third solution, which I personally consider the most effective, involves conducting validation checks before rendering the results when receiving the data.

If you have a method getData() in your component and need to apply validation on a specific field:

getData() {
   service.getData().subscribe(data => {
      data.foreach(row => {
         // Conduct necessary validation as shown in example
         if (row.total_packing < 0) {
           row.total_packing = 0;
         }
      }
      this.totalWorkPerMonth = data;
   });
}

What is the best way to extract values from a specific table column and store them in an array using Angular?

Answer №1

Similar questions

Transforming query language from jQuery to Pure JavaScript

Using JavaScript, generate an array of objects that contain unique values by incrementing each value by 1

It appears there was a mistake with [object Object]

Validation error from Express-validator may result in TypeScript error: the request.query object could potentially be undefined

What could be causing this discriminated union to act differently than anticipated?

Storing data in Angular 2's ngFor loop for later usage

Having trouble loading extensive amounts of data into a select element within an Angular application

When utilizing DomSanitizer, Angular2 suddenly ceases to function properly

The error message "Property 'map' is not found on type 'User' in React with typescript"

TypeScript types for d3 version 4

Converting image bytes to base64 in React Native: A step-by-step guide

The array within the JSON object holds vital information [Typescript]

execute a rigorous compilation during the ng build angular process

Tips for running a Nativescript-Angular app in the background

Is it possible to utilize a single node_modules folder for multiple Angular 2/4 projects?

Unexpected behavior encountered when using TypeScript type declarations

Struggling with transferring data rows between tables in Angular with Angular Material

Module lazily loaded fails to load in Internet Explorer 11

When using TypeScript with Jest or Mocha, an issue arises where the testing frameworks are unable to read JavaScript dependencies properly, resulting in an error message saying "unexpected token

Accessing an Excel file in TypeScript using the .xlsx format