0
votes

I have a mat-autocomplete that loads table data that is in JSON format and currently maps a single JSON value as the selected "value" when the user selects an item from the autocomplete.

In addition to this value, I also need to pass some other values from this selected item's JSON node, as these values are being written to a database. So I need 3 values from this selected object, not just one.

But I'm not sure how to access those additional JSON properties from the existing interface or if I need to modify the interface to allow those values to be passed as well.

For example, the table data that populates the autocomplete is below and we are currently using the "codeFileType" as the "value" passed when a user selects an item from the autocomplete table:

"table-lookups": [
{
  "codeFileType": "NEW_CODE_FILE_TYPE_A",
  "datasource": "A",
  "myAutoCompleteHook": "autocompleLookupTest1",
  "myAutoCompleteParams": [
    {
      "name": "_endpoint",
      "value": "MyCodeFile"
    },
    {
      "name": "_labelKey",
      "value": "code"
    },
    {
      "name": "_valueKey",
      "value": "description"
    }
  ]
},
{
  "codeFileType": "NEW_CODE_FILE_TYPE_B",
  "datasource": "B",
  "myAutoCompleteHook": "autocompleLookupTest2",
  "myAutoCompleteParams": [
    {
      "name": "_endpoint",
      "value": "MyCodeFile"
    },
    {
      "name": "_labelKey",
      "value": "code"
    },
    {
      "name": "_valueKey",
      "value": "description"
    }
  ]
},
{
  "codeFileType": "NEW_CODE_FILE_TYPE_C",
  "datasource": "C",
  "myAutoCompleteHook": "autocompleLookupTest3",
  "myAutoCompleteParams": [
    {
      "name": "_endpoint",
      "value": "MyCodeFile"
    },
    {
      "name": "_labelKey",
      "value": "code"
    },
    {
      "name": "_valueKey",
      "value": "description"
    }
  ]
}

],

So, from above JSON, we are mapping the codeFileType as the "value" of the select. I also need to access the selected item's "myAutoCompleteHook" and "myAutoCompleteParams" values as well and pass those along with codeFileType as separate data points.

Here is the HTML format of the mat-option element where we are binding the [value] to the valueKey:

<mat-option
 *ngFor="let values of filteredResults$ | async; trackBy: trackByFn; index as i"
 [value]="values[tableConfig?.valueKey]"
 [innerHtml]="buildLabelFromValuesChecked(values, isOptionSelected(values[tableConfig?.valueKey]))">
</mat-option>
why not just keep the full data object on the component, and match back the selected value to retrieve the missing info - J Scott
So, use [value]="values" and parse out the selected properties from value? - jcoder