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

Adjust the specific data type to match its relevant category

Angular 7 SPA encountering Media Type Not Supported 415 issue when communicating with .NET, despite successful request in Postman

The inline style in Angular 2 is not functioning as expected when set dynamically

Error encountered in Angular 2 with RXJS Observable: Unable to call function catch() on this.http.get(...).map(...) due to TypeError

Sorting elements in an array based on an 'in' condition in TypeScript

Create a compilation of categories/interfaces based on a mapping

Issue with Angular routing not functioning properly post form submission

Direct your attention to utilizing directives when dealing with an empty ngselect

Creating a generic class in Typescript that can only accept two specific types is a powerful

HTML not updating after a change in properties

Angular, Node.js, NVM (Node Version Manager), and NPM (Node

Encountered an error while trying to access the 'touched' property of undefined within Angular6 reactive forms

Having trouble assigning a value of `undefined` to a TextField state in React hook

Jest assertions encountering type errors due to Cypress

There was an issue retrieving the metadata for the bootstrap package using the git+ssh protocol

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

Is there a surefire method to ensure that ChromeDriver in Protractor consistently uses the stable version?

Sending properties to MUI Box component enhancer (Typescript)

Ways to showcase corresponding information for an item contained within an array?

Utilizing the FormsModule and ReactiveFormsModule within a Component module