In my possession is a collection of JSON objects, here's an example:
[
{
id: 'cont-609',
contactMedium: [
{
characteristic: {
emailAddress: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1b0a1c1b2f08020e0603410c0002">[email protected]</a>'
}
}
]
}]
The task at hand is to retrieve the emailAddress (contactMedium[0].characteristic.emailAddress) from within PrimeNG autoComplete attribute 'field' in order to display a list of emails in a drop-down menu.
There will always be one element inside contactMedium
Provided 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbbaabcbb8fa8a2aea6a3e1aca0a2">[email protected]</a>'
}
}
]
},
{
id: 'cont-610',
contactMedium: [
{
characteristic: {
emailAddress: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c78697f784c6b616d6560226f6361">[email protected]</a>'
}
}
]
},
{
id: 'cont-611',
contactMedium: [
{
characteristic: {
emailAddress: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cddccacdf9ded4d8d0d597dad6d4">[email protected]</a>'
}
}
]
},
{
id: 'cont-612',
contactMedium: [
{
characteristic: {
emailAddress: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3c7d6c0c7f3d4ded2dadf9dd0dcde">[email protected]</a>'
}
}
]
},
{
id: 'cont-614',
contactMedium: [
{
characteristic: {
emailAddress: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2d6c7d1d6e2c5cfc3cbce8cc1cdcf">[email protected]</a>'
}
}
]
}
];
}
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;
}
}
Displayed 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 section of the attribute is not functioning properly, field="contactMedium[0].characteristic.emailAddress" however if I use the non-array "id" property from the JSON, it works fine field="id" , but the aim is to showcase email addresses.
Feel free to explore the implementation via the link provided below:
https://stackblitz.com/edit/primeng-autocomplete-demo-dyihrs?file=src%2Fapp%2Fapp.component.html