I have a listbox and I am binding a list of items from a controller.
$scope.AvailableListItems = [
[{Id:1,SupplierName: 'john.banks'},
{Id: 2,SupplierName: 'jim.chevy'},
{Id: 3,SupplierName: 'ralph.stocks'}]
];
This JSON data is hardcoded. It works fine when used with the following HTML:
<select multiple id="availabelist" size="10" style="width:100%" ng-change="OnAvailableChange()" ng-model="SelectedAvailItems" ng-options="i as i.email for i in AvailableListItems[selectFaIndex]| filter:availablequery"></select>
However, when I try to generate the same thing dynamically, it does not work and shows a blank list box. The code snippet for this dynamic generation is as follows:
var getSuppliers = function () {
var tempArray = [];
var lstsuppliers = CRUDService.getApiOutput(getSuppliersApiRoute);
lstsuppliers.then(
function (response) {
debugger;
$scope.supplierList = response.data;
for (var i = 0; i < $scope.supplierList.length; i++) {
arr = {};
arr["Id"] = $scope.supplierList[i].supplierId;
arr["SupplierName"] = $scope.supplierList[i].supplierName;
tempArray.push(arr);
}
$scope.AvailableListItems = tempArray;
console.log(JSON.stringify($scope.AvailableListItems));
},
function (error) {
console.log("Error: " + error);
});
}
I need help identifying what could be wrong with my code.
Here is how my response data appears based on Claies: https://i.sstatic.net/g8GkP.png
[{"Id":1,"SupplierName":"ACECO PRECISION MANUFACTURING"},{"Id":2,"SupplierName":"Pentagon EMS Corporation"},{"Id":3,"SupplierName":"QUANTUMCLEAN"},{"Id":4,"SupplierName":"MODERN CERAMICS"},{"Id":5,"SupplierName":"NXEDGE INC"}]