CODEWITHSUNDEEP
javascriptangularjs
jonnie
jonnie

Reputation: 12710

Why am I getting undefined for my variable in the controller but it displays correctly in the HTML page with data binding

Why am I getting values with data binding from my with {{myItem}} but in my controller when I try to assign a new variable I get or output to console I get undefined.

This is my controller:

var controllers = angular.module("myItem.controllers", []);
controllers.controller('myItemController', function ($scope, MyItemService) {
    $scope.version_model = null;
    $scope.itemGroup_model = null;
    $scope.item_model = null;

    $scope.myItem = null;
    $scope.versions = null;
    $scope.itemGroups = null;
    $scope.hierarchies = null;

    $scope.init = function () {

        $scope.myItem = MyItemService.getMyItem();
        console.log("myItem => id= " + $scope.myItem.versionID + " requestTypeID: " + $scope.myItem.requestTypeID);
        $scope.versions = MyItemService.getVersions();
        $scope.version_model = $scope.myItem.versionID;
        console.log("version_model :" + $scope.version_model + "scope.myItem.versionID : " + $scope.myItem.versionID);

        $scope.itemGroups = MyItemService.getItemGroups();
        $scope.itemGroup_model = $scope.myItem.itemGroup;
        console.log("itemGroup_model :" + $scope.itemGroup_model + " scope.myItem.itemGroup : " + $scope.myItem.itemGroup);

        $scope.hierarchies = MyItemService.getItemList($scope.itemGroup_model);
        $scope.item_model = $scope.myItem.itemName;
        console.log("item_model :" + $scope.item_model + " scope.myItem.itemName : " + $scope.myItem.itemName);
    }

    $scope.getItems = function (group) {
        $scope.hierarchies = MyItemService.getHierarchyList(group);
    }

any time I try to assign anything from $scope.myitem I keep getting undefined. I have tried setting inside the init, out side the init., everything works on my page except for where the _model values are undefined, once I interact with someting and it gets updated all works fine, just not on initialization

Update

this is what my service looks like

angular.module('servicefactories', [])
    .factory('MyItemService', function ($http, $q) {
    obj.getMyItem= function () {
        var mypromise = $q.defer();
        $http.get('getforEdit')
            .success(function (data, status, headers, config) {
            mypromise.resolve(data);
        });

        return mypromise.promise;
    }

    return obj;

});

Upvotes: 0

Views: 361

Answers (2)

Chandermani
Chandermani

Reputation: 42669

As I suspected this is issue with async call. You can use the then method on promise to access the data and assign once data comes from server. Something like

MyItemService.getMyItem().then(function(data) {
         $scope.myItem=data;
         console.log("myItem => id= " + $scope.myItem.versionID + " requestTypeID: " + $scope.myItem.requestTypeID);
        $scope.versions = MyItemService.getVersions();
        $scope.version_model = $scope.myItem.versionID;
        console.log("version_model :" + $scope.version_model + "scope.myItem.versionID : " + $scope.myItem.versionID);
});

Upvotes: 1

user2680139
user2680139

Reputation:

call your function: $scope.init();

In your code init function do not run on initialize controller. You must call it manually.

Upvotes: 1

Related Questions