Having trouble retrieving the value of an object in Angular

Question

Having trouble retrieving the value of an object in Angular

I have an AngularJS factory named 'userFactory' that I'm using:

app.factory('userFactory', function($window) {
    var auth = {
        isLogged: false,      
        user: "a",
        check: function() {
            if ($window.sessionStorage.token) {
                this.isLogged = true;
            } else {
                this.isLogged = false;
                delete this.user;
            }
        }
    }
    return auth;
});

To test it out, I added some static content inside a controller. On clicking a button, the following code runs:

// replace "a" with the following
app.controller('LoginCtrl', ['$scope', '$window', '$location', 'userFactory',
    function ($scope, $window, $location, userFactory) {     
        $scope.login = function(){
            var userCredentials = {
                "username": $scope.username,
                "password": $scope.password
            };
            if (userCredentials.username == "amir" && userCredentials.password == "blum") {
                userFactory.isLogged = true;
                userFactory.user = {
                    "name": "amir",
                    "surname": "blumenfeld"
                };
                $location.path("/customer");
            } else {
                alert("NO");
            }
        }
    }
]);

Then, trying to display the surname "blumenfeld" on the page:

function menuCtrl($scope, $location, userFactory, $window) {
    $scope.user = userFactory.user.surname;
}

The expected output should be "blumenfeld" here:

<ul ng-controller="menuCtrl">                
    <li><a href="#home">{{ user }}</a></li>                                                                                                    
</ul>

But unfortunately, all I see is just an empty space.

I need assistance in identifying where I went wrong and how I can correct it.

Thank you!

javascript angularjs

Answer 1

Answer №1

It appears that there is an issue with how you are setting the value of $scope.user to userFactory.user.surname upon creation. Essentially, your user is assigned as a and surname as undefined.

Subsequently, in your click event, you are assigning userFactory.user to an object. However, since $scope.user remains undefined, it does not recognize that its value depends on userFactory.user, resulting in a constant value of undefined.

To resolve this issue, you need to assign the object within your factory to an object itself. Additionally, in your click event, update the values without altering the object.

var app = angular.module('MyApp', []);
app.factory('userFactory', function($window) {
    var auth = {
      isLogged: false,      
      user: {
         name: "a",
         surname: "a",
         job: "a",
      }
    }
    return auth;
  });

app.controller('menuCtrl2', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.load = function () {
    userFactory.user.name = "amir"
    userFactory.user.surname = "blumenfeld"
    userFactory.user.job = "crazy" 
  }
}]);

app.controller('menuCtrl', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.user = userFactory.user;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="MyApp">
  <div ng-controller="menuCtrl2">
     <button ng-click="load()">Load</button>
  </div>
  <div class="row" ng-controller="menuCtrl">
    {{user.surname}}
  </div>
</div>

Here's an alternative approach using a method:

var app = angular.module('MyApp', []);
app.factory('userFactory', function($window) {
    var auth = {
      isLogged: false,      
      user: {
         name: "a",
         surname: "a",
         job: "a",
      }
    }
    return auth;
  });

app.controller('menuCtrl2', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.load = function () {
    userFactory.user = {"name":"amir", "surname":"blumenfeld", "job":"crazy"};
  }
}]);

app.controller('menuCtrl', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.user = function () {
    return userFactory.user.surname
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="MyApp">
  <div ng-controller="menuCtrl2">
     <button ng-click="load()">Load</button>
  </div>
  <div class="row" ng-controller="menuCtrl">
    {{user()}}
  </div>
</div>

Answer 2

It appears that there is an issue with how you are setting the value of $scope.user to userFactory.user.surname upon creation. Essentially, your user is assigned as a and surname as undefined.

Subsequently, in your click event, you are assigning userFactory.user to an object. However, since $scope.user remains undefined, it does not recognize that its value depends on userFactory.user, resulting in a constant value of undefined.

To resolve this issue, you need to assign the object within your factory to an object itself. Additionally, in your click event, update the values without altering the object.

var app = angular.module('MyApp', []);
app.factory('userFactory', function($window) {
    var auth = {
      isLogged: false,      
      user: {
         name: "a",
         surname: "a",
         job: "a",
      }
    }
    return auth;
  });

app.controller('menuCtrl2', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.load = function () {
    userFactory.user.name = "amir"
    userFactory.user.surname = "blumenfeld"
    userFactory.user.job = "crazy" 
  }
}]);

app.controller('menuCtrl', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.user = userFactory.user;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="MyApp">
  <div ng-controller="menuCtrl2">
     <button ng-click="load()">Load</button>
  </div>
  <div class="row" ng-controller="menuCtrl">
    {{user.surname}}
  </div>
</div>

Here's an alternative approach using a method:

var app = angular.module('MyApp', []);
app.factory('userFactory', function($window) {
    var auth = {
      isLogged: false,      
      user: {
         name: "a",
         surname: "a",
         job: "a",
      }
    }
    return auth;
  });

app.controller('menuCtrl2', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.load = function () {
    userFactory.user = {"name":"amir", "surname":"blumenfeld", "job":"crazy"};
  }
}]);

app.controller('menuCtrl', ['$scope', 'userFactory', function($scope, userFactory){
  $scope.user = function () {
    return userFactory.user.surname
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="MyApp">
  <div ng-controller="menuCtrl2">
     <button ng-click="load()">Load</button>
  </div>
  <div class="row" ng-controller="menuCtrl">
    {{user()}}
  </div>
</div>

Answer 3

Answer №2

After pasting your code, I noticed that it is functioning correctly. Take a look here

var myApp = angular.module('myApp', []);
myApp.factory('userFactory', function($window) {
    var auth = {
      isLogged: false,      
      user: "a"
    }
    return auth;
  });
function MyCtrl($scope, userFactory) {
    userFactory.user = {"name":"amir","surname":"blumenfeld","job":"crazy"};
     $scope.user = userFactory.user.surname; 
}

Answer 4

After pasting your code, I noticed that it is functioning correctly. Take a look here

var myApp = angular.module('myApp', []);
myApp.factory('userFactory', function($window) {
    var auth = {
      isLogged: false,      
      user: "a"
    }
    return auth;
  });
function MyCtrl($scope, userFactory) {
    userFactory.user = {"name":"amir","surname":"blumenfeld","job":"crazy"};
     $scope.user = userFactory.user.surname; 
}

Answer 5

Answer №3

Experiment with constructing a user object without using quotation marks around property names:

userFactory.user = {name:"amir",surname:"blumenfeld",job:"crazy"};

Answer 6

Experiment with constructing a user object without using quotation marks around property names:

userFactory.user = {name:"amir",surname:"blumenfeld",job:"crazy"};

Having trouble retrieving the value of an object in Angular

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to access the local Express server that is located in the same directory as the frontend project

Providing the full response object when resolving a promise from $http

The use of callbacks in Model.findById() is now deprecated due to a MongooseError

An issue arises with ReactJS MaterialUI Stepper when there is an overflow

Postman is showing a 404 error message when trying to access an Express JS route that uses a POST request

The useEffect hook is causing a loop of API calls after successfully fetching data

Issue with aligning items vertically using CSS and Javascript

Error: controller undefined

The lifecycle of transitions in Nuxt 3

Switch the status of an individual item within a datalist using jQuery in an ASP.NET application

How can we ensure that the slider thumb label is always shown in Angular 16 Material components?

The attribute 'inventory' cannot be found in the declaration of 'WarehouseModule'

Incorporating jQuery functions in the Angular app's main component file, app

The browser Internet Explorer fails to recognize the @media screen rule

The Javascript Keydown event seems to fire twice

What is the best way to consistently display a scroll bar at the bottom?

Using experimental.externalDir in NextJS prevents the use of absolute imports in external libraries

Transmitting occasional feedback from ASP.NET Web API function to jQuery AJAX

Verify that each interface in an array includes all of its respective fields - Angular 8

I encountered a CORS policy error while using React. What steps can I take to effectively manage and resolve this