$watch for objects in JSON Angularjs

Question

I want to create a $watch in a directive to a specific part of a json object but it doesn't seem to accept the syntax (no errors appear, but it never goes inside the watch)

link: function (scope, element) {
scope.JsonObject={
    profs:{
        prof1:[{
           name:example1a,
           id:example1b
        }],
        prof2:[{
           name:example2a,
           id:example2b
        }]
     }
 }  

scope.teachers=scope.JsonObject['profs']

//until here all ok

for ( var  teacher in scope.teachers){
    //stuff to do
    console.log("creating watch of " + teacher);

    scope.$watch('teachers[teacher]', function() {  //here seems to be the problem (it doesnt seem to accept JsonObject.teacher)       
    //stuff to do

}, true);
}

what do you want to achieve by creating a watch inside the directive, please make it clear and also a plunkr with your code will be helpful to resolve your issue — balajivaishnav
– balajivaishnav, Commented Sep 27, 2016 at 9:40
what I do is call a highcharts plugin : new Highcharts.chart(teacher + "_id",chartoptions); but in this case I dont think it's relevant, the problem is that it never goes inside the watch anyway — Alfonso Mateos
– Alfonso Mateos, Commented Sep 27, 2016 at 9:56
JsonObject.teacher is undefined so you can use JsonObject.profs or teacher.profs — Shaishab Roy
– Shaishab Roy, Commented Sep 27, 2016 at 9:59
Yep, sorry I messed up a little while passing my code to the question format. Thank you for noticing, already edited the question — Alfonso Mateos
– Alfonso Mateos, Commented Sep 27, 2016 at 10:06

Ravi Teja · Accepted Answer · 2016-09-27 11:38:01Z

1

Previously, teachers[teacher] was undefined because there were no ' '(quotes) around the teacher.

for (var teacher in $scope.teachers){
    $scope.$watch("teachers['"+ teacher +"']", function(newValue, oldValue) {
      alert("changed");
   }, true);
}

answered Sep 27, 2016 at 11:38

Ravi Teja

1,1058 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alfonso Mateos Over a year ago

Thank you very much, this was what I was looking for. However in case anyone is new in this (like me) and has the same problem it is important to know that: 1) It is not possible to acces the variable "teacher" inside the watch since the value might have changed for the time of the execution of the watch, use newValue , oldValue instead 2) Don't create debugger's or breakpoints inside the watch since it will pop up an error: main execution waits for the never ending termination of the watch (I think). Instead use traces for debugging like console.log()

Sten Muchow · Accepted Answer · 2016-09-27 11:17:31Z

1

The string doesnt get interolated into the object.

function getTeacher(teacher) {
   return $scope.teachers[teacher]
}

scope.$watch(getTeacher(teacher), function() {
//Do stuff
},  true);

answered Sep 27, 2016 at 11:17

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

Comments

Gerardo · Accepted Answer · 2019-01-29 15:25:45Z

1

You can't use use an outside value inside a $watch, specially inside a loop. Picture it as an interval, if you put an interval or a timeout inside a loop, the value of the variable handled outside the interval ('$scope.teachers[teacher]' in this case) will not be accesible from the inside, or at least will take the last iteration value.

answered Jan 29, 2019 at 15:25

Gerardo

212 bronze badges

1 Comment

Alfonso Mateos Over a year ago

True, I commented something similar on a previous answer, but this is also what happened.

Collectives™ on Stack Overflow

$watch for objects in JSON Angularjs

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related