Get bookmarks from Chrome scope issue

Question

I am trying to learn about Chrome extensions and am having some trouble. I am trying to get a list of my bookmarks using chrome.bookmarks api but I am having trouble getting the actual values where I can manipulate them.

I have this simple angular module:

angular.module('bookmarkapp', [])
  .controller('mainctrl', function($scope) {


    $scope.tree = [];
    dumpBookmarks();
    console.debug($scope.tree);

    function dumpBookmarks() {
      $scope.bookmarkTreeNodes = chrome.bookmarks.getTree(
        function(bookmarkTreeNodes) {
          console.debug(bookmarkTreeNodes)
          $scope.tree = bookmarkTreeNodes;
        });
    }

  });

And I want to get the tree structure object into the $scope.tree variable. When I do console.debug(bookmarkTreeNodes) I get the values of the bookmarks, but when I try and set it equal to $scope.tree and print that out I can't. I am not that new to js and angular but I seriously don't know why this wouldn't work.

EDIT here is a bookmarkTreeNodes structure

Array [3]
    Array[0] 
        children : Array[17]
        title : "bookmarks bar"
    Array[1]
        children : Array[0]
        title : "Other bookmarks"
    Array[2]
        children : Array[1]
        title : "Mobile Bookmarks"

Here is the html using the controller:

<body ng-app="bookmarkapp" ng-controller="mainctrl">
  <div class="row">
    <div class="col s12">
      <div class="card grey darken-1">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <h4 data-ng-repeat="item in bookmarks">{{item.title}}</h4>
        </div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

@Xan This is not a duplicate of https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron. — Rob W, Jun 30 '15 at 20:16
@RobW If you say so. It's good to have another gold badge as oversight. Also, I really need to learn Angular, it seems. — Xan, Jun 30 '15 at 20:17

score 0 · Accepted Answer · answered Jun 30 '15 at 20:15

0

The callback to chrome.bookmarks.getTree is invoked outside the digest cycle of Angular.js. You have to call $scope.$apply to apply the changes. And since the .getTree method doesn't return anything, remove the $scope.bookmarkTreeNodes = chrome.bookmarks.getTree(...); assignment.

This should work as expected:

function dumpBookmarks() {
  chrome.bookmarks.getTree(function(bookmarkTreeNodes) {
    $scope.$apply(function() {
      $scope.tree = bookmarkTreeNodes;
    });
  });
}

Also take a look at the Understanding Angular’s $apply() and $digest() tutorial at Sitepoint.

answered Jun 30 '15 at 20:15

Rob W

341,306
83
791
678

I think this may be close, but it just returns an empty array. – erp Jun 30 '15 at 20:24
@erp How do you know that "it returns an empty array"? If you expect `console.debug($scope.tree);` to print the array: it does not, because you overwrite `$scope.tree` with a new array. How does your template look like (the one that utilizes your controller). – Rob W Jun 30 '15 at 20:27
I know it returns an empty array because when looking in the javascript console on chrome that's the result from the `console.debug($scope.tree)` – erp Jun 30 '15 at 20:31
@erp Where did you put `console.debug($scope.tree);`? After the `$scope.tree = bookmarkTreeNodes;`, I presume? – Rob W Jun 30 '15 at 20:32
@erp Regarding your edit of the question, the template should use `item in tree`, not `item in bookmarks`... – Rob W Jun 30 '15 at 20:34
outside of the function `dumpBookmarks`. That is were I want to manipulate it. Or do I have to manipulate it inside of the callback? I am only trying to set `$scope.tree = bookmarkTreeNodes` so I can then manipulate that list wherever I please. And yes I know it's `item in tree` the array however is still null which I am concerned about – erp Jun 30 '15 at 20:34
1

@erp It must be inside the callback, for the reasons explained in https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron. – Rob W Jun 30 '15 at 20:35
Ok well then that clears things up. So anything I want to do with the list of bookmarks needs to be inside correct? – erp Jun 30 '15 at 20:36
@erp Yes. And if you want to let Angular know about your changes, it must be inside a `$apply` call. – Rob W Jun 30 '15 at 20:37
Okay thanks, sorry for being slow. Just trying to learn new things – erp Jun 30 '15 at 20:41

Get bookmarks from Chrome scope issue

1 Answers1