enhanced bookmark widget - load bookmarks from saved json

[RebeccaWatson]

I just started to convert my flex web application into a JavaScript one and I am having some difficulty with a piece of functionality I am trying to add to the Enhanced Bookmark Widget - namely to allow the user to load a list of bookmarks via a saved JSON file.

I have added a 'Load' button and when it is clicked it reads in the user's chosen file but then I am stuck. Having tried various things, I think what I need to do is something like the below code. Specifically, I haven't got the hang of passing my result out to the new BookmarkListView - the result just becomes 'undefined'. Can anyone point me in the right direction as to how I need to reference as mybookmarkarray to make it the result of the FileReader?

    _onLoadBtnClicked: function() {
      var file = fileInput.files[0];
              var reader = new FileReader();
              reader.readAsText(file);
              reader.onload = function(e){
                result = reader.result;
                try{
                    JSON.parse(result);
                  }
                catch (e){
                    alert("This is not a valid Bookmarks file")
                  }
                console.log(JSON.parse(result));
                //I checked the result and it is good but...
                //How do I pass result from here 
              }
              domConstruct.empty(this.bookmarkListBody);

              this.bookmarkListView = new BookmarkListView({
                mybookmarkarray: //to here
                eBookmarkWidget: this,
                config: this.config,
                map: this.map,
                nls: this.nls
              }).placeAt(this.bookmarkListBody);
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks for any help.

[deleted-user-Sh7q9fbKLpEv]

Hi Rebecca,

Not sure this is exactly what you're looking for, but you might want to check out the "Save Session" widget by David McCourt, which allows users to load a saved JSON file (of extents and/or layer selections, etc.) into their web appbuilder app. 

Jacqueline

[RebeccaWatson]

Hi Jacqueline - sorry for the delay in my reply - I only work on this part time and it has taken a while to look through what you suggested, but the good news is that it has lead me to my answer.  Looking at the code from the Save Session widget, I could see that the answer was to assign 'this' to the widget outside of the onload function so I could then transfer the code to update the bookmarks inside the onload function and reference the widget without using 'this' in there as that was just pointing to the FileReader. I've still got a lot to do, but below is the bit of working code...

Thanks for your help!

    _onLoadBtnClicked: function() {

      var result = "",
          toLoad = null,
          me = this,
          file = fileInput.files[0],
          reader = new FileReader();

      reader.onload = function(e){
        result = reader.result;

          try {
            toLoad = JSON.parse(result);
            me.bookmarks = toLoad;
            me.showBookmarks();

          }catch (e){
            alert("This is not a valid Bookmarks file")
          }
    }
      reader.readAsText(file);
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍