UI Grid Cannot Read Property Data of Undefined

Question

Having Issues with getting the data for my ui grid? Not sure what I'm doing wrong here, but I console.log the data so I know i'm getting it back.

My data is coming back as a object and i'm trying to reach the team members array in the object to reference.

function loadProjectDetails(){
    return MrktRsrchPrjtDataService.getProjectSubsection(MrktRsrchPrjtDataService.getCurrentReportId(), "ProjectSummary")
    .then(function (data){
        vm.project = data;
        console.log(data);
vm.teamGridOptions = {
    enableGridMenu: false,
    enableSorting: true,
    enableHorizontalScrollbar: 0, /*always hide horizontal scroll bar*/
    enableVerticalScrollbar: 1, /*always show vertical scroll bar*/
    rowHeight: 46,  
    columnDefs: [
            {
                    enableHiding: false,
                    enableColumnMenu: false,
                    displayName: 'First Name',
                    field: 'memberId',
                    cellClass: 'ui-grid-cell-contents',
                    cellTemplate: '<span>{{row.entity.teamMembers.memberId}}</span>'
                },
        ],
        data: vm.project
    };

    });
}

//HTML

 <div ui-grid="vm.teamGridOptions" ui-grid-auto-resize class=""></div>

Answer 1

In the html you call vm.teamGridOptions. What is the name of your controllor? AngularJS convention is to name the controller "ctrl", so this would mean you should be calling ctrl.teamGridOptions.