0

I apologize if this is rudimentary, but extensive googles and trolling through StackOverflow questions have gotten me workarounds but no answers. I am sure the answer is out there, I just don't where where there is.

I have been trying to make a simple Chrome Extension that can move around bookmarks. There are several points where I want to have a for-loop run up until the length of an existing object.

Here is a snippet of what I mean. Forgive me if my JavaScript hurts the eyes:

var book = {title:[], id:[], url:[], parentId:[], children:[], index:[]};

function getHier(id) {
    obj = book.title.length;
    chrome.bookmarks.getChildren(id, function (children) {
        children.forEach(function (bookmark) {
            book.title[obj] = bookmark.title;
            book.id[obj] = bookmark.id;
            book.url[obj] = bookmark.url;
            book.parentId[obj] = bookmark.parentId;
            book.children[obj] = bookmark.children;
            book.index[obj] = bookmark.index;
            obj += 1;
        });
    });
};
getHier('0');
getHier('1');

At this point, I would like to do something like this :

for(var i = 0, len = book.url.length; i <= len; i++){

       //DO SOMETHING

}

The problem is, it doesn't run through the for-loop as I expected. But, if I made this a function, and called in the console AFTER I have loaded my extension, it works great. OR, if I use an integer in place of book.url.length the code executes as I expect.

As a side note, I do have a document.addEventListener('DOMContentLoaded', function() {}) in the body of my script as well. While I don't believe it is part of the issue (I have commented it out and the problem sticks around), I thought it was worth mentioning.

My question is, at what point do my variables/objects become defined? Clearly book.url.length is not defined when I try to refer to it in my for-loop. So when can I "refer back" to a value I have just set?

Update 1:

If I place the loop into a function, and call that function on a click event within my document.addEventListener('DOMContentLoaded', function() {}), the function executes my loop as expected. This, I assume, would be the same as calling the function in the console as the script is loaded before I can click any of my buttons; but this really isn't what I'd like to happen. I'll continue to update as I hack away at this, trivial as it may be, problem.

Makyen
  • 31,849
  • 12
  • 86
  • 121
INV3NT3D
  • 119
  • 7
  • How are you accessing the bookmarks? https://developer.chrome.com/extensions/bookmarks#method-getTree? – Rob M. Nov 02 '16 at 19:08
  • I have only used [getChildren](https://developer.chrome.com/extensions/bookmarks#method-getChildren) , I will try using getTree and see if I can refer to that the way I wish. I'm starting to think my usage of getChildren could be the root of my issues. – INV3NT3D Nov 02 '16 at 19:11
  • Thank you for your help, both of you. I will be doing some reading tonight, give it a go, and post back here with results. When I get it going I'd be happy to accept an answer. – INV3NT3D Nov 02 '16 at 20:56
  • 1
    In addition, the organization that you are using for your `book` data is poor. If you are wanting to access the information as an array, then it would be *much* better to create an array of bookmarks, each with the various bookmark properties, rather than one object that has properties which are arrays. Thus, use `var book=[];` and within your `children.forEach` loop you can just do [`book.push(bookmark);`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) without the need to individually copy each property, or keep track of and index with `obj`. – Makyen Nov 02 '16 at 21:02
  • 1
    Yet more: you currently call `getHier('0');` and `getHier('1');` in order. Given the asynchronous nature of `chrome.bookmarks.getChildren()`, both calls will result in `obj` starting at `0`. Thus, when the callback is called, the results from the second one that is called will overwrite the results from the first either partially or fully depending if there are more children in the second one that gets called back (which *could* be either `id`; it will probably be in order, but that is not guaranteed). – Makyen Nov 02 '16 at 21:10
  • 1
    Your use of a `DOMContentLoaded` listener and mention of listening for a `click` makes me wonder how you have this extension organized. Please [edit] the question to include a *manifest.json*. – Makyen Nov 02 '16 at 21:11
  • Thank you deeply @Makyen, these are the references and the guidance that I needed. I decided try Javascript out, I find the best way to learn a language is through a small project in that language. Thank you again, I appreciate the extra time you took to give me some tips. – INV3NT3D Nov 02 '16 at 23:57

0 Answers0