javascript - map row value to key value of a ListItem

Question

In my angular app, I have a mat-table where I have to match the value with a key in a list Item and assign the value.

HTML

 <table mat-table [dataSource]="result$">
 <ng-container matColumnDef="test">
            <th mat-header-cell *matHeaderCellDef class="bottom-primary-color"> test </th>
            <td mat-cell *matCellDef="let row" width="150px"> {{textTest(row.test)}} </td>
        </ng-container>
</table>

TS

    get textTest() {
        const textData = this.api.get('http://test').getList('data');
        return textData;
    }

data example

textData = [{key: "st1", text: "step1"},
        {key: "st2", text: "step2"},
        {key: "st3", text: "step3"}]

If row.test value matches with the key value. I want to display text value from textData.

Example

row.test = 'st1' // display step1.
row.test = 'st2 // display step2

please guide me.

question from:https://stackoverflow.com/questions/65901031/map-row-value-to-key-value-of-a-listitem

Answer 1

const textData = [
  {key: "st1", text: "step1"},
  {key: "st2", text: "step2"},
  {key: "st3", text: "step3"},
];

const wantedKey = 'st1';

function getWantedKey(wantedKey,textData) {
  if(!wantedKey) return 'Empty wanted key';
  if(!textData.length) return 'Empty text data';
  
  const result = textData.find((row) => {
    return row.key===wantedKey;
  });
  
  if(!result) return 'Wanted key not found';
  
  return result && result.text;
}

console.log(getWantedKey(wantedKey,textData));