Angular $scope.variable undefined

Question

I am having a problem that my $scope.todo list always returns a undefined when using the angular function ng-repeat. If I define the $scope.todo it works perfectly but when I use the solution below to fetch results and add it to the variable I get an undefined before it seems to have a chance to go and retrieve the correct values

I have now added a bit better code to explain my problem. After looking at some of the jsfiddles below and trying those solutions I'm starting to think its something to do with my callbacks.

function TodoCtrl($scope) {

   $scope.todos = [];

   buildInitialList(function (result){
       console.log(result); //Logs defined after the undefined below
       $scope.todos = result;
   });

   console.log($scope.todos); //Logs undefined before the defined log above
}

function buildInitialList(callback){
    //Simulates call to db
    setTimeout(function (){
    callback([{text: 'item 1', done: false},
        {text: 'item 2', done: false}]);
},2000);
}

function fetch(url, callback) {
    $.getJSON(url, function (data, status) {
        callback(data);
    });
}

There a few syntax errors are they typos or your actual code? — Kyle Needham
– Kyle Needham, Commented Feb 16, 2014 at 21:38
You are never actually assigning the result to your scope variable. jsfiddle.net/973nW — Craig Squire
– Craig Squire, Commented Feb 16, 2014 at 22:00

Dalorzo · Accepted Answer · 2014-02-16 21:55:01Z

2

Shouldn't this:

$scope.testList = buildInitialList(function (result){
     return result;
   }

Be like this:

$scope.testList = buildInitialList( function (result){return result;} );

And buildInitialList function is not returning any value. Based on your sample code it could something like this:

function buildInitialList(callback){
   var result = doWorkAndGetResult();
   callback(result);
  //missing return value...
   return result; /*maybe?*/
}

Here is a fully working jsfiddle demo:

http://jsfiddle.net/f9ee4/1/

edited Feb 16, 2014 at 21:55

answered Feb 16, 2014 at 21:43

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

9 Comments

Marty Cochrane Over a year ago

sorry that doesn't work. If I do $scope.testList = buildInitialList(function (result){ console.log(result); return result; }); I get the correct result logged to the console so both functions seem to working ok just not getting called at the correct time

Dalorzo Over a year ago

@MartyCochrane it worked on my end. Your function had not return that is/was the issue.

Dalorzo Over a year ago

@MartyCochrane, I added a JSFiddle.

Marty Cochrane Over a year ago

thanks for your help. I have edited your fiddle to help explain my problem jsfiddle.net/f9ee4/2

Dalorzo Over a year ago

@MartyCochrane here is the answer...again a return is needed... jsfiddle.net/f9ee4/3

|

Craig Squire · Accepted Answer · 2014-02-16 22:18:41Z

0

You are never actually assigning your result to the scope variable. Your callback is being called, but the return value of your callback is NOT what gets assigned to your scope property.

By using a callback, I'm assuming you have some sort of async call in that global function. If you don't have an async call in there, then you should just return the value from buildInitialList, without using a callback.

Here's a fiddle that works: http://jsfiddle.net/973nW/

function MyCtrl($scope) {
    buildInitialList(function (result){
        $scope.name = result;
    });  
}

Side note: using a global function isn't a good idea, you may want to consider putting your function into a service.

edited Feb 16, 2014 at 22:18

answered Feb 16, 2014 at 22:05

Craig Squire

2,14114 silver badges13 bronze badges

Comments

Marty Cochrane · Accepted Answer · 2014-02-17 08:27:43Z

After pulling my hair out and thinking something was wrong with my javascript it turns out the problem was actually within the ng-repeat I was using in the HTML

This is what my html looked like

<ul class="unstyled">
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
</ul>

This worked fine when I had defined a list of ToDo's right from the start however when I had to go to the DB & retrieve that list the results never seemed to be applied to the original $scope.todos

I had to use the $scope.$apply function to make sure when my values were retrieved from the DB they were actually applied to the $scope afterwards

buildInitialList(function (result){
    $scope.$apply(function (){
        console.log(result);
        $scope.todos = result;
    });
});

Collectives™ on Stack Overflow

Angular $scope.variable undefined

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related