electron-userland / electron-json-storage

:package: Easily write and read user settings in Electron apps
1.44k stars 80 forks source link

How to do you apply this to a variable ( or to the scope in AngularJS )? #12

Closed deweyaccounts closed 8 years ago

deweyaccounts commented 8 years ago

Please forgive me as I'm a total noob when it comes to javascript and node.

I'm using this module in an AngularJS (1.53) controller for an Electron (0.37.5) application and trying the following to apply the contents of an apikey.json file to a scope variable.

    $scope.apikey;
    storage.get('apikey', function(error, data) {
        console.log('get the api key : ' + data.key);
        $scope.apikey = data.key;
    });
   console.log('this will be undefined...' + $scope.apikey);

Is there some way to apply the data from the json file to a variable (or to the $scope in AngularJS)?

It works on the first console log "get the api key" but fails on the second one. Do I need to just attach to a global variable on the window object?

Javascript's scope issues always have been baffling to me. I'm primarily a PHP user.

deweyaccounts commented 8 years ago

The first workaround I've tried is to enclose the storage.get within a function. I've also tried just putting all of my controller logic within the storage.get. Scope is always coming back to bite me. It's probably my biggest confusion with Javascript. I've taken many classes on Udemy for learning Javascript but obviously it is not sinking in. I'm going to try putting a callback function within storage.get to set the variables and see if that works.

jviotti commented 8 years ago

Hi @deweyaccounts

The problem is that the functions provided by electron-json-storage operate asynchronously. This means that your second console.log will actually run before the variable has been set.

Consider this example that showcases the issue:

setTimeout(function() {
  console.log('First console log');
}, 1000);

console.log('Second console log');

If you run that in NodeJS, the result, surprisingly at first, will be:

console.log('Second console log');
console.log('First console log');

So in order to log the new value of your scope variable, you must modify your code like this:

storage.get('apikey', function(error, data) {
  console.log('get the api key : ' + data.key);
  $scope.apikey = data.key;
  console.log('now it will be defined...' + $scope.apikey);
}); 

I suggest you to read a bit about asynchronous programming in general (applies to NodeJS, and JavaScript running in the browser). This looks like a nice tutorial: https://www.codementor.io/nodejs/tutorial/manage-async-nodejs-callback-example-code. Its strange at first (we all made the same mistakes at some point), but its a very powerful way of structuring your programs.

Let me know if I can help with anything else!

deweyaccounts commented 8 years ago

That makes sense. Thank you for the quick and detailed response. I think I know how I can structure the program to work for my needs. I'm going to set up a service to pull in the variables. I appreciate the link about asynchronous programming. That seems to be the area where I'm needing the most study.