JS: ERROR TypeError: Cannot read property 'push' of undefined

Question

I have a question about my code.

I want to use this autocomplete in my project for country plugin

I get all country in JSON like below:

JS: country [{
JS:   "name": "Afghanistan",
JS:   "short_name": "AF",
JS:   "country_id": 1
JS: }, {
JS:   "name": "Albania",
JS:   "short_name": "AL",
JS:   "country_id": 2
JS: }, {
JS:   "name": "Algeria",
JS:   "short_name": "DZ",
JS:   "country_id": 3
JS: }, {
JS:   "name": "American Samoa",
JS:   "short_name": "AS",
JS:   "country_id": 4
JS: }, {
JS:   "name": "Andorra",
JS:   "short_name": "AD",
JS:   "country_id": 5
JS: },{
JS:   "...}]

In service I call function like in this code:

 public getAllCountryws(): Observable<Country[]> {
        return this.http.get(Api.getUrl(Api.URLS.countryGetAll), {
        })
            .pipe(map((response: Response) => {
                let res = response.json();
                if (res.StatusCode === 1) {
                    this.auth.logout();
                } else if (res.StatusCode === 4) {
                    return false;
                } else if (res.StatusDescription === 'No result') {
                    return false;
                } else if (res.StatusDescription === '[]') {
                    return false;
                } else if (res.StatusDescription === []) {
                    return false;
                } else {
                    return res.StatusDescription.map(country => {
                        return new Country(country);
                    });
                }
            },
                (error) => {
                    console.log(error);
                }))
    }

And in component.ts I call service function like in this code:

public country: Country[] = [];
  private _items: ObservableArray<TokenModel>;
   @ViewChild("autocomplete") autocomplete: RadAutoCompleteTextViewComponent;

   ngOnInit(): void {
        this.getallcountry();
    }
    getallcountry() {
        this.ws.getAllCountryws().subscribe(
            country => {
                this.country = country;
                const mycountry = country;
                console.log('mycountry', mycountry) // show correct JSON
                 for (let i = 0; i < mycountry.length; i++) {
                console.log(mycountry.length) // show correct
                     this._items.push(new TokenModel(mycountry[i].company_id, null));
                }
            },
            err => console.error('err', err),
            () => console.log('error')
        );
    }

ERROR:

error

Also, in html I have this code:

            <Label text="Select Country*" row="0" col='0'></Label>
            <RadAutoCompleteTextView #autocomplete [items]="_items" suggestMode="Suggest" displayMode="Tokens"
                row="1" col='0' hint="Country">
                <SuggestionView tkAutoCompleteSuggestionView>
                    <ng-template tkSuggestionItemTemplate let-item="item">
                        <StackLayout orientation="vertical" padding="10">
                            <Label [text]="item.name"></Label>
                        </StackLayout>
                    </ng-template>
                </SuggestionView>
            </RadAutoCompleteTextView>

In view, doesn't show nothing. No results found.

Update: From : private _items: ObservableArray<TokenModel>;

To: public _items: TokenModel[] = [];

Add:

   get dataItems():  TokenModel[] {
        console.log('this._items', this._items)
        return this._items;
    }

Error with result

In html change:

from: <RadAutoCompleteTextView #autocomplete [items]="_items" suggestMode="Suggest" displayMode="Tokens"

to:

 <RadAutoCompleteTextView #autocomplete [items]="dataItems" suggestMode="Suggest" displayMode="Tokens"

In view doesn't show any results.

Answer 1

In your component.ts file change the _items declaration

From:

private _items: ObservableArray<TokenModel>;

To:

private _items: TokenModel[] = [];