javascript - Unable to load dynamic data into ui-grid dropdown -

i using ui-grid angularjs (and mysql @ backend) project. got table gets data mysql database. rows (or cells) editable (as mentioned in example on ui-grid website). 1 column of table has dropdown. dropdown working hard coded data described in example. want populate database shows empty dropdown list everytime tried.

fetching of data database done service injected controller intention run code gets data database (i.e. $http.get('/some/route')) have data table rows , dropdown list in hand before or @ time of page loading.

but variable (sitesd) gets data dropdown when printed, shows undefined.

here controller:

angular.module('workersctrl', []).controller('workerscontroller', function($scope, $http, serverdata) {  $scope.gridoptions = {enablehorizontalscrollbar: 1};  /* getting rows databse using "serverdata" custom service */ serverdata.getdata().then(function(response) {         $scope.gridoptions.data = response.data[0];         $scope.sitesdata = response.data[1]; }); var sitesd = $scope.sitesdata; $scope.gridoptions.columndefs = [     { field: 'first_name', width:150, enablecelledit: true},     { field: 'last_name', width:150},     { field: 'father_first_name', width:150},     { field: 'father_last_name', width:150},     { field: 'mother_first_name', width:150},     { field: 'mother_last_name', width:150},     { field: 'sex', width:50, editablecelltemplate: 'ui-grid/dropdowneditor',         editdropdownvaluelabel: 'gender', editdropdownoptionsarray: [           { id: 'm', gender: 'male' },           { id: 'f', gender: 'female' }]},     { field: 'address', width:250},     { field: 'phone', width:100, type: 'number'},     { field: 'date_of_birth', width:150, type: 'date', cellfilter: 'date:"yyyy-mm-dd"'},     { field: 'post_code', displayname: 'post', width:50},     { field: 'joining_date', width:150, type: 'date', cellfilter: 'date:"yyyy-mm-dd"'},     { field: 'rate', width:50, type: 'number'},     { field: 'site_name', width:150, editablecelltemplate: 'ui-grid/dropdowneditor',     editdropdownidlabel:'site_id', editdropdownvaluelabel: 'site_name', editdropdownoptionsarray: sitesd }, ]; alert(sitesd); //checking variable value: shows undefined.  $scope.gridoptions.onregisterapi = function(gridapi){     $scope.gridapi = gridapi; };  $scope.adddata = function() {     $scope.gridoptions.data.push({         'first_name': '',         'last_name': '',         'father_first_name': '',         'father_last_name': '',         'mother_first_name': '',         'mother_last_name': '',         'sex': '',         'address': '',         'phone': '',         'date_of_birth': '',         'post_code': '',         'joining_date': '',         'rate': '',         'site_name': ''     }); }; }); 

code of service following:

angular.module('geekservice', []).factory('serverdata', ['$http', function($http) {     return {         getdata: function() {             return $http.get('/workers')         }     } }]); 

here screenshot of page when alert(sitesd); runs:

what understand variable gets value after page loads , editdropdownoptionsarray gets no value dropdown.

all these assumptions made while looking solution haven't sceeded yet. please me. feel didn't understand where's problem.

feel free ask further information if needed.

ps: while writing question found there version incompatibility between angular , ui-grid. ui-grid 3.x compatible angular's 1.4.x i'm using ui-grid 3.x angular 1.5.5. can reason?

edit: here screenshot, showing how dropdown looks:

harmanpreet,

since bringing in dynamic content asynchronously recommend looking @ ui-grid "editdropdownrowentityoptionsarraypath" functionality instead of "editdropdownoptionsarray" functionality appears meant static values discovering now. there information on over ui-grid api site: http://ui-grid.info/docs/#/api/ui.grid.edit.api:columndef

if data static list , won't changing or dependent maybe code below work well, reaching out:

serverdata.getdata().then(function(response) {     $scope.gridoptions.data = response.data[0];     $scope.sitesdata = response.data[1];      // may have shape data in method before doing next line     // ex: var sitesarray = shapesitesdata();      $scope.gridoptions.columndefs[13].editdropdownoptionsarray = $scope.sitesdata; }); 

since stackoverflow doesn't respect new people's opinions cannot comment on thread transistor. see believe help. issue encountering due fact ui-grid doesn't great job of mapping ids , values. should try variant (which believe improves upon @mltroutt's solution).

angular.module('app')      .controller('yourctrl', yourfunction)      .filter('griddropdown', function () {     return function (input, context) {         var fieldlevel = (context.editdropdownoptionsarray == undefined) ? context.col.coldef : context;         var map = fieldlevel.editdropdownoptionsarray;         var idfield = fieldlevel.editdropdownidlabel;         var valuefield = fieldlevel.editdropdownvaluelabel;         var initial = context.row.entity[context.col.field];         if (typeof map !== "undefined") {             (var = 0; < map.length; i++) {                 if (map[i][idfield] == input) {                     return map[i][valuefield];                 }             }         }         else if (initial) {             return initial;         }         return input;     }; 

then add coldef

cellfilter: 'griddropdown:this'