shows me the array - how do i limit it to the product name ?

[seatechdev]

I have a JSON feed that has productid, productname and few other attributes. When queried I would like to show only the product name and when selected it should add the producid to scope so that I can add it to my database. how do I go about it? Right now I am seeing the full json array.

[guylabs]

Hi @sbasi5576

could you please follow the https://github.com/guylabs/ion-autocomplete#guidelines-to-report-an-issue guidelines and provide a demo or how you configured the directive? Without this information I am not able to help you properly.

Thanks and regards

Guy

[seatechdev]

Hi,

I used the following for my work:

HTML input ion-autocomplete type="text" readonly="readonly" class="ion-autocomplete" autocomplete="off" ng-model="model" items-method="callbackMethod(query)" /

$scope.callbackMethod = function (query, isInitializing) { if(isInitializing) {

    return { items: [] }
} else {
    return $http.get(myendpoint);
}

}

My APIs are owned by the client and they won't allow me to post the actual code on the internet.

[guylabs]

Ok I see. Could you maybe post the obfuscated data of the response? I just need to see how the response structure looks like. Please also check that you set the https://github.com/guylabs/ion-autocomplete#the-items-method-value-key to items such that the list is properly populated.

[seatechdev]

Thank you for your flexibility.

{ "id": "381158", "upc": "007192120696", "product_name": "Enclosure1", "model": null, "color": null, "size": null, "spec": null, "cat_id": "1", "subcat_id": "1", "image": "someurl/prod1.jpg", "category": "Loaded Enclosures", "subcategory": null, "price": "149.99", "status": "1" }, { "id": "789159", "upc": "007192120726", "product_name": "Enclosure2", "model": null, "color": null, "size": null, "spec": null, "cat_id": "1", "subcat_id": "1", "image": "someurl/prod2.jpg", "category": "Mono Subwoofer Amps", "subcategory": null, "price": "199.99", "status": "1" }]

[guylabs]

Ok you need to set the https://github.com/guylabs/ion-autocomplete#the-item-value-key and https://github.com/guylabs/ion-autocomplete#the-item-view-value-key to the values you want to persist and the value you want to see in the list. And do not set the items-method-value-key as this is not needed in your case. Then it should display it properly. Maybe also go through the other points in the documentation.

[seatechdev]

This helped. $scope.clickedMethod helped me assign the model value to my angular script.

I have another question. Can I show more than one value with item-view-value-key? Basically, I would like to show the Image of the Product and the Name. Down the road I might want to expand to price or UPC as well. These attributes are available or will be available in the web response. Many thanks for your help.

[guylabs]

in the 'item-view-value-key' you are able to use expressions. please read the documentation about that. if you want to change the template you need to read the part about the 'template url'.

[seatechdev]

Ok I couldn't figure out how to use expressions. I ended up modifying the template to make this work. Simply changed my item class to thumbnail and added 'img ng-src="{{ item.product_image }}"', to solve for this. Thanks again for all your help.