How to access array element inside 'field' attribute of PrimeNG autoComplete

Question

I have a list of JSON object, 1 of the sample is below

 [
  {
    id: 'cont-609',
    contactMedium: [
      {
        characteristic: {
          emailAddress: '[email protected]'
        }
      }
    ]
  }]

My goal here is to access emailAddress (contactMedium[0].characteristic.emailAddress) inside PrimeNG autoComplete attribute 'field' so that I can display list of emails in drop down.

There will be always 1 element inside contactMedium

Below is my typescript code

import { Component, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { SelectItem } from 'primeng/api';
import { SelectItemGroup } from 'primeng/api';
import { FilterService } from 'primeng/api';
import { AutoComplete } from 'primeng/autocomplete';
import { CountryService } from './countryservice';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [CountryService, FilterService]
})
export class AppComponent {
  userDetails: any[];

  selectedUserDetails: any[];

  selectedValue: any;

  selectedUserDetail: any;

  constructor() {}

  ngOnInit() {
    this.userDetails = [
      {
        id: 'cont-609',
        contactMedium: [
          {
            characteristic: {
              emailAddress: '[email protected]'
            }
          }
        ]
      },
      {
        id: 'cont-610',
        contactMedium: [
          {
            characteristic: {
              emailAddress: '[email protected]'
            }
          }
        ]
      },
      {
        id: 'cont-611',
        contactMedium: [
          {
            characteristic: {
              emailAddress: '[email protected]'
            }
          }
        ]
      },
      {
        id: 'cont-612',
        contactMedium: [
          {
            characteristic: {
              emailAddress: '[email protected]'
            }
          }
        ]
      },
      {
        id: 'cont-614',
        contactMedium: [
          {
            characteristic: {
              emailAddress: '[email protected]'
            }
          }
        ]
      }
    ];
  }

  filterUserDetails(event) {
    let filtered: any[] = [];

    for (let val of this.userDetails) {
      filtered.push(val);
    }
    this.selectedUserDetails = filtered;
  }

  getUserDetails(): Promise<any[]> {
    return Promise.resolve(this.userDetails);
  }

  chooseItem(event) {
    this.selectedUserDetail =
      event.contactMedium[0].characteristic.emailAddress;
  }
}

Below is my HTML code

        <h5>Dropdown Testing</h5>
    <p>selectedUserDetail : {{selectedUserDetail}}</p>
    <p>TestVal : {{testVal}}</p>
    <p-autoComplete [(ngModel)]="selectedUserDetail" [suggestions]="selectedUserDetails"
      (completeMethod)="filterUserDetails($event)" [dropdown]="true" field="contactMedium">
      <!--<ng-template let-userDetails pTemplate=" item">
        <div>{{userDetails.contactMedium[0].characteristic.emailAddress}}</div>
      </ng-template> -->
    </p-autoComplete>

This part of the attribute is not working, field="contactMedium[0].characteristic.emailAddress" but if I place "id" from the json which is not array it works field="id" , but the goal here is to display emails.

Below is the link of the code if you want to access for experiment :

https://stackblitz.com/edit/primeng-autocomplete-demo-dyihrs?file=src%2Fapp%2Fapp.component.html

georgeos · Accepted Answer · 2021-05-29 15:48:53Z

1

UPDATE

It's not possible, because primeng doesn't accept fields as part of an array. You can check code here in the autocomplete component and here, in the function used to resolve field

---

Primeng doesn't catch the array inside contactMedium:

contactMedium[0].characteristic.emailAddress

I suppose that documentation refers to an Object without arrays.

AutoComplete can also work with objects using the field property that defines the label to display as a suggestion.

As an alternative, you can manipulate the object to remove the array.

Here is an example, you can confirm that using contactMedium as array, doesn't work.

edited May 29, 2021 at 15:48

answered May 28, 2021 at 21:48

georgeos

2,5312 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hargun Suri Over a year ago

Hello Georgeos, Thank you for your suggestion, I tried the approach you suggested earlier but I was stuck at 1 point when I was creating custom JSON object where my key is configurable "contactMedium[0].characteristic.emailAddress" and I was not able to get the value at run time, I asked suggestions in this link stackoverflow.com/questions/67742949/…

georgeos Over a year ago

Ok, I'll check yourt post. Just FYI check my edited answer.

Collectives™ on Stack Overflow

How to access array element inside 'field' attribute of PrimeNG autoComplete

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related