Get values from dynamic string array in Typescript

Question

In angular material form, I have a field with mat-option which contains list of options(i.e., a, b, c, d, e). When user selects/unselects one particular option(i.e., c), I need to do some manipulation. But I am getting undefined error, even if I select an option 'c' without selecting any other option.

I can understand that it is due to the index value[2] that I have used. I am not sure on how to identify if the user selects option 'C' or not Since it's index value may increase or decrease dynamically based on user selection.

Response array may look like:

value = {'d','c'} or value = {'c','b','a'} or value = {}

if(value[2] === 'c') {
   console.log('c');
 }

Can someone help me to write typescript code?

{'d','c'} is not an array

Cagri Tacyildiz
– Cagri Tacyildiz

2020-05-03 03:38:53 +00:00
Commented May 3, 2020 at 3:38 — Cagri Tacyildiz
– Cagri Tacyildiz, Commented May 3, 2020 at 3:38

deerawan · Accepted Answer · 2020-05-03 04:48:11Z

Maybe there's a missing thing in your code. Since you told us that you use mat-option, I tried to create sample code using that.

component.html

<h4>mat select</h4>
<mat-form-field>
  <mat-label>Choose option</mat-label>
  <mat-select [formControl]="optionControl" required (valueChange)="onChange($event)">
    <mat-option>--</mat-option>
    <mat-option *ngFor="let option of options" [value]="option">
      {{option}}
    </mat-option>
  </mat-select>  
</mat-form-field>

<div>
  <p>Selected value</p>
  {{ optionControl.value }}
</div>

component.ts

import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: 'app-example.html',
  styleUrls: ['app-example.css'],
})
export class AppExampleComponent {
  optionControl = new FormControl('', Validators.required);  
  options = ['a', 'b', 'c']; // this is static but should be dynamic for your case

  onChange(value: string) { // value will be selected option
    if (value === 'c') {
      console.log('c');
    }
  }
}

Take a look at the action on StackBlitz

Xinan · Accepted Answer · 2020-05-03 10:26:50Z

4

I don't think value = {'d','c'} or value = {'c','b','a'} or value = {} is something legit JavaScript/TypeScript syntax for objects. Unless you were referring to something like {c: 'c'}

In that case it's an object and you need either Object.keys() or Object.values() to convert it to an array first.

const value = {
  c: 'c',
  b: 'b',
  a: 'a'
};

if(Object.values(value).includes('c')) {
  console.log('c');
} else {
  console.log('NO c'); 
}

answered May 3, 2020 at 10:26

Xinan

3,1721 gold badge18 silver badges18 bronze badges

Comments

Marko Radivojević · Accepted Answer · 2020-05-03 03:44:36Z

1

Let's say user can select multiple options. You need to subscribe to selection change, or call a method from HTML whenever change happens. For example all selected values are stored in values variable. How are selected values stored in values depends on the way you detect change. After every selection change split that variable to an array like this:

let valuesArray = values.toString().split(',');

Then check every array element:

valuesArray.forEach(v => { if (v === 'c') { console.log('c'); } });

answered May 3, 2020 at 3:44

Marko Radivojević

4482 gold badges7 silver badges11 bronze badges

Collectives™ on Stack Overflow

Get values from dynamic string array in Typescript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related