Why AngularJS is changing values of the objects?

Question

My AngularJS service code -

this.getEducation = function (id) {
            var url = 'SOME_URL/?party_id=' + id;
            var deferred = $q.defer();

            $http.get(url).
                success(function (data, status, headers, config) {
                    console.log(data);
                    deferred.resolve(data);
                }).
                error(function (data, status, headers, config) {
                    console.log("could not get education info");
                    deferred.reject(data);
                });
            return deferred.promise;
        }

Now, my service is returning a data like this -

[
  {
    "id": 22,
    "party_id": 9,
    ...
    "university": "UoP",
    "created_at": "2015-07-13 17:09:52",
    "degree": "BE"
  },
  {
    "id": 23,
    "party_id": 9,
   ...
    "university": "UoP",
    "created_at": "2015-07-13 17:11:06",
    "degree": "ME"
  }
]

Now, here's the problem - when the data being resolved in promise, contains following array -

[
      {
        "id": 22,
        "party_id": 9,
        ...
        "university": "UoP",
        "created_at": "2015-07-13 17:09:52",
        "degree": "BE"
      },
      {
        "id": 23,
        "party_id": 9,
       ...
        "university": null,
        "created_at": "2015-07-13 17:11:06",
        "degree": null
      }
    ]

So, my question is, WHY AngularJS setting some values of my array elements to null ???

P.S. I'm using the data retrieved by this in controller, assigning it to scope variable, and doing ng-repeat on forms.

Edit : My controller code is as follows

 $scope.educationInformations = [];
 $scope.setEducation = function () {
            EducationProvider.getEducation(id).then(
                function (educations) {

                    angular.forEach(educations, function(education){
                        console.log(education);
                  $scope.educationInformations.push({education:education});
                        console.log($scope.educationInformations);
                    })
            });
        };

THIS works, (console log is accurate)

Now, This is my template code. When this is used,

<div ng-repeat="educationInfo in educationInformations">
<input-text ng-model="educationInfo.education.university"></input-text>
</div>

Now input-text is a directive created by me.. Directive code -

.directive('inputText', function () {
        return {
            templateUrl: 'views/inputText.html',
            restrict: 'E',
            scope: {
                ngModel: '='
            }
        };
    });

Directive template

<input class="form-control" 
ng-model="ngModel" ng-init="ngModel = null">

I have a hard time believing angular is the cause of this. More debugging is needed. — Kevin B, Jul 21 '15 at 21:46
Did you look at the data coming back from your `$http.get` request by inspecting the actual response? Does it have `null`s? — Ross Rogers, Jul 21 '15 at 21:49
is that expect data verified, or just what you assume is coming in? — Graham P Heath, Jul 21 '15 at 21:50
To debug further, start by going to your browser network tab and inspecting the request. Are the values null there? Yes? server problem. No? continue. Next add some logging to your service. Is it null there? Yes? provide that code. No? continue. Next add some logging to your controller. Is it null there? Yes? provide that code. No? I don't believe in magic, so you shouldn't get this far. — Kevin B, Jul 21 '15 at 21:51
Hello, this is really driving me crazy, why it is happening. I'm stuck like 5 hours. @KevinB : is this has something to do with I'm assigning the same array to score variables (models) and repeating them in a form? — Vishwajeet Vatharkar, Jul 21 '15 at 21:53
@KevinB : I already did that, the data posted above is the actual response from the request — Vishwajeet Vatharkar, Jul 21 '15 at 21:54
Then your looping shouldn't have anything to do with it. remove the looping. — Kevin B, Jul 21 '15 at 21:56
If the console.log has nulls then the problem is on the server side and has nothing to do with angular. — Jesse Carter, Jul 21 '15 at 21:57
@KevinB : After removing the looping from controller (and template) the console log on success is correct. But why a data retrieved from service has anything to do with whatever controller does with it? — Vishwajeet Vatharkar, Jul 21 '15 at 22:00
I mean there is no binding, at all, between controller and service, right? — Vishwajeet Vatharkar, Jul 21 '15 at 22:01
console.log can be tricky at times. If you used a debugger statement instead, you would have seen values instead of nulls, at which point you would have followed the problem on to find the src, :) — Kevin B, Jul 21 '15 at 22:01
you passed `data` to the resolve, so anything you do to it will affect `data` as well, because it's the same object. By the time you expanded the object in your console, the controller had already modified it, so the console showed the modified object. — Kevin B, Jul 21 '15 at 22:03
Oh!!!! If this is the case, then it is a design flaw maybe! As services and controllers does not have data binding, Angular should create separate objects when the data is retrieved in controller, from service. — Vishwajeet Vatharkar, Jul 21 '15 at 22:07
no...you as developer need to understand object inheritance and what object references are. Also should have posted code so people can help better and aren't completely guessing at what is happening — charlietfl, Jul 21 '15 at 22:24
Hi @KevinB : I've updated the code in question, also I've solved the problem - and answered to the question myself! Thank you so much :-) — Vishwajeet Vatharkar, Jul 21 '15 at 23:40

score 0 · Answer 1 · answered Jul 21 '15 at 23:38

Edit the directive template code as follows

<input class="form-control" 
ng-model="ngModel" ng-init="ngModel">

Your code was setting ng-model to null ( ng-init = "ngModel = null ), as you have two way binding with controller, this initialization to null would affect the controller scope objects.

Why AngularJS is changing values of the objects?

1 Answers1