Javascript - How to filter arrays using another array value in Angular

dev254
October 27, 2023
280 views
1 vote
2 Answers

I have this table with a select option in each row,
and according to ‘dataType’ in each row the value of select option will change.

Table Array:

{
'name':'Name',
'count': 22,
'dataType':'numerical'
}
{
'name':'Name',
'count': 44,
'dataType':'string'
}
]

select option array :

{
'numerical':['1', '2', '3'],
'string':['a', 'b', 'c'],
}

Tags: angular javascript

Answers

- Eliseo
- October 27, 2023 at 1:35 pm
- 0 votes
0
it’s equal in a table or in a div (unless you use mat-table or another library to show a table)
```
<div *ngFor="let data of tableArray">

  {{data.Name}} 
  {{data.dataType}} 
  {{option[data.dataType] |json}} <!--give you the array option["numerical"]
                                      or the array option["string"]
  <select>
    <option *ngFor="let value of option[data.dataType]" [value]="value">
       {{value}}
    </option>
  </select>
</div>
```
But (always there are a but) remember use [(ngModel)] or use ReaciveForms if you want to "store" the values selected in variables of the .ts. It’s impossible know what are you try to do with your brief explain of the question
Login or Signup to reply.

- AdesojiAlu
- October 27, 2023 at 1:41 pm
- 0 votes
0
You can accomplish this task using Angular by dynamically changing the options available in each select dropdown based on the ‘dataType’ of each row.

1. HTML Template:

Create a table and, for each row, create a select dropdown whose options are determined by the ‘dataType’.
```
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Count</th>
      <th>Select Option</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableArray">
      <td>{{item.name}}</td>
      <td>{{item.count}}</td>
      <td>
        <select>
          <option *ngFor="let option of getOptions(item.dataType)" [value]="option">{{option}}</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
```
2. Angular Component:
- Define the data as given.
- Create a function getOptions() to return the correct options array based on the ‘dataType’.
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tableArray = [
    {
      'name':'Name',
      'count': 22,
      'dataType':'numerical'
    },
    {
      'name':'Name',
      'count': 44,
      'dataType':'string'
    }
  ];

  selectOptions = {
    'numerical':['1', '2', '3'],
    'string':['a', 'b', 'c'],
  };

  getOptions(dataType: string) {
    return this.selectOptions[dataType];
  }
}
```
Explanation:
- The function getOptions(dataType: string) in the component takes a dataType as an argument and returns the corresponding array of options from selectOptions.
- In the HTML, we are looping over each item in tableArray to create rows in the table.
- For the select column, the options are populated by looping over the array returned by getOptions(item.dataType), and this is how we dynamically assign options based on ‘dataType’.
Run this code in your Angular environment, and you should see a table with select options that change based on the ‘dataType’ in each row.
Login or Signup to reply.