0

I'm programming a Particle Photon (like an Arduino). I'm trying to call a variable from it and then use that variable to add a .css class to a div.

The problem is that the variable keeps coming back as 

undefined

on the initial call. However, if I call it again a couple of seconds later, it works fine.

This is the API call from Particle:

 particle.getVariable({ deviceId: 'DEVICE_ID', name: 'temp', auth: token }).then(function(data) {
  console.log('Device variable retrieved successfully:', data);
}, function(err) {
  console.log('An error occurred while getting attrs:', err);
});

Here is my version of it:

function getVariable(varName) { 
particle.getVariable({ deviceId: device_ID, name: varName, auth: accessToken }).then(function(data) {
    return data.body.result;
    }, function(err) {
        console.log('An error occurred while getting variable:', err);
});
}

I'd like to be able to work with this like 

$(".class").addClass(getVariable("var")

I'm pretty new to jQuery and Javascript, but I've been doing a ton of reading on callbacks and promises and getting nowhere. Any idea how to accomplish this?

syndac
  • 49
  • 8

1 Answers1

1

You have several issues here.

  1. Your getVariable() function needs to return the promise from particle.getVariable(). That will allow the caller of getVariable() to use .then() on the returned result to get the asynchronous result.

  2. Promises do not magically make an asynchronous operation into a synchronous one. So, your getVariable() function is still asynchronous because it relies on the result of particle.getVariable() which is asynchronous. So, you cannot return the result directly. Instead, you should make it return a promise and the caller of that function can use .then() to retrieve the async result.

  3. Since getVariable() will be asynchronous, you will need to use getVariable(...).then(...) to get access to the async result.

Change to this:

function getVariable(varName) {
    return particle.getVariable({
        deviceId: device_ID,
        name: varName,
        auth: accessToken
    }).then(function (data) {
        return data.body.result;    // this becomes the fulfilled value of the promise
    }, function (err) {
        console.log('An error occurred while getting variable:', err);
        throw err;                  // rethrow error so it will propagate
    });
}

getVariable("var").then(function (result) {
    $(".class").addClass(result);
}, function(err) {
    // handle error here
});

For a lot more description of returning asynchronous values, you can see this: How do I return the response from an asynchronous call?

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Oh my gosh. Thank you so much! I'd played with variations of your first section of code, but never thought to use a promise for the second section. Ugh. Is there any way to have it work at all with something like `$(".class").addClass(getVariable("var")`? Your solution works, but just hoping to simplify. Either way, thanks for the help. – syndac Jul 14 '16 at 00:34
  • @syndac - Nope, the result is async. You can't return the result directly from `getVariable()`. – jfriend00 Jul 14 '16 at 00:40
  • No problem. Thanks again for the help! – syndac Jul 14 '16 at 16:10