Ngx-chips: Problem with identifyBy and displayBy

[alpernakin]

I'm submitting a ... (check one with "x")
```
[x ] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Current behavior
// itemsAsObjects = [{display: 0, value: 'Angular'}, {display: 1, value: 'React'}]; // selectedObjects = [{display: 0, value: 'Angular'}];

[autocompleteItems]="itemsAsObjects">

`

See properties of the array and attributes of tag-input element. It works in this way.

Expected behavior
// itemsAsObjects = [{id: 0, name: 'Angular'}, {id: 1, name: 'React'}]; // selectedObjects = [{id: 0, name: 'Angular'}];

[autocompleteItems]="itemsAsObjects">

`

It also should work in this way but that error shows up:

Cannot read property 'toString' of undefined error

Angular version:
Angular 5.2.9

ngx-chips version:
1.8.0

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[Gbuomprisco]

Try using strings instead of numbers

[alpernakin]

The problem still exists, identifyBy and displayBy do not work properly. I think it is not about using strings.

It is necessary to create the model in this way:
[{display: 0, value: 'Angular'}, {display: 1, value: 'React'}]

[Gbuomprisco]

Are you sure you're not inverting display and value? Value can be a number, display can't

[alpernakin]

I have actually tried in that way:

// itemsAsObjects = [{id: '0', name: 'Angular'}, {id: '1', name: 'React'}]; // selectedObjects = [{id: '0', name: 'Angular'}]; <tag-input [ngModel]="selectedItems" [identifyBy]="'id'" [displayBy]="'name'"> <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="itemsAsObjects"> </tag-input-dropdown> </tag-input>

so no number was used at all but the same problem pops up.

[Gbuomprisco]

You need to redefine identifyby and displayby in the dropdown

[alpernakin]

It worked, thanks!

[smartbopche]

I am getting issue display undefined in autocomplete
below is my code can someone please help.

return this.http .get(url, { headers: reqHeader }) .pipe(map(data => data.json().data.items .map((item: { display: any; email: any; id: any; value: any; }) => { item.display, item.email, item.id.toString(), item.value } )));

<tag-input [(ngModel)]="userIds" name="userIds" [identifyBy]="'id'" [displayBy]="'email'" class="form-control" [placeholder]="'Enter emails'" [secondaryPlaceholder]="'Enter email'" [onlyFromAutocomplete]="true" [clearOnBlur]="true" [theme]="'bootstrap'"> <tag-input-dropdown [autocompleteObservable]="RequestRegisteredEmails" [minimumTextLength]="1"> <ng-template let-item="item" let-index="index"> {{ item.email }} </ng-template> </tag-input-dropdown> </tag-input>

[smartbopche]

I am getting issue display undefined in autocomplete
below is my code can someone please help.

return this.http .get(url, { headers: reqHeader }) .pipe(map(data => data.json().data.items .map((item: { display: any; email: any; id: any; value: any; }) => { item.display, item.email, item.id.toString(), item.value } )));

<tag-input [(ngModel)]="userIds" name="userIds" [identifyBy]="'id'" [displayBy]="'email'" class="form-control" [placeholder]="'Enter emails'" [secondaryPlaceholder]="'Enter email'" [onlyFromAutocomplete]="true" [clearOnBlur]="true" [theme]="'bootstrap'"> <tag-input-dropdown [autocompleteObservable]="RequestRegisteredEmails" [minimumTextLength]="1"> <ng-template let-item="item" let-index="index"> {{ item.email }} </ng-template> </tag-input-dropdown> </tag-input>

Problem has been solved.

return this.http
.get(url, { headers: reqHeader })
.pipe(map(data => data.json().data.items
.map((item1: any) => {
let item = { display: item1.email, value: item1.id.toString() };
return item;
})));

[nickx720]

I am getting issue display undefined in autocomplete
below is my code can someone please help.
return this.http .get(url, { headers: reqHeader }) .pipe(map(data => data.json().data.items .map((item: { display: any; email: any; id: any; value: any; }) => { item.display, item.email, item.id.toString(), item.value } )));
<tag-input [(ngModel)]="userIds" name="userIds" [identifyBy]="'id'" [displayBy]="'email'" class="form-control" [placeholder]="'Enter emails'" [secondaryPlaceholder]="'Enter email'" [onlyFromAutocomplete]="true" [clearOnBlur]="true" [theme]="'bootstrap'"> <tag-input-dropdown [autocompleteObservable]="RequestRegisteredEmails" [minimumTextLength]="1"> <ng-template let-item="item" let-index="index"> {{ item.email }} </ng-template> </tag-input-dropdown> </tag-input>

Problem has been solved.

return this.http
.get(url, { headers: reqHeader })
.pipe(map(data => data.json().data.items
.map((item1: any) => {
let item = { display: item1.email, value: item1.id.toString() };
return item;
})));

Thank you so much for this :)

[oestrada1001]

ngx-chips version: 2.1.0
angular version: 8.2.14

I was getting this error and I was able to get it to work by applying [displayBy] and [identifyBy] to the <tag-input-dropdown> element.

HTML:

...
  <tag-input formControlName="newSkill"
              [identifyBy]="'id'"
              [displayBy]="'keyword'">
    <tag-input-dropdown
        [showDropdownIfEmpty]="true"
        [autocompleteItems]="keywords"
        [identifyBy]="'id'"
        [displayBy]="'keyword'">
    </tag-input-dropdown>
  </tag-input>
...

TS:

...
keywords = [
    [id: 1, keyword: 'art'],
    [id: 2, keyword: 'accounting']
];
...

I used FormBuilder and it's working properly.