[SOLVED]Jquery getJSON calls returns 404 error

Troubleshooting
1

Hi after reading @bko 's nice tutorial on Reading spark vars ( Reading Spark Variables with Your Own HTML File ) I created a function to get variable data from particle. I keep getting Failed to load resource: the server responded with a status of 404 (Not Found) error on my console. can someone help me understand what is happening here?

I have checked the requestURL output and it looks exactly the same as URL i’m using in the “Control LEDs over the net” example. And YES, I am (globally) declaring “deviceID”, “varName”, and “accessToken” with the correct values for my particle board.

Can’t figure this out, what am I missing?

function getValue() {
    requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
    console.log(requestURL);
    $.getJSON(requestURL, function (json) {
        ledState = json.result;
        document.getElementById("ledPower").innerHTML = ledState;
        updateSwitch();
    });

}
2

What happens if you put the output of the request URL in your browser? If configured properly, you should be seeing the variable pop up.

2 Likes
3

That’s a great idea. The browser console is usually the way I debug this type of problem.

@superliminal should also check the version of jquery: cut and past the script URL for the jquery library near the top of the file into a browser window and see if you get a bunch of text or 404.

2 Likes
4

My guess, completely unconfirmed, is that there should not be a forward slash after the variable name and before the access token query arguments.

In other words, the string should be this instead:

"?access_token="
5

Just tried it, and that doesn’t seem to matter. Valid idea nonetheless :smile:

6

@Moors7 The output of the request URL looks like this (except “deviceID”, “varName”, and “accessToken” replaced with my info)
https://api.particle.io/v1/devices/your-device-ID-goes-here/varName?access_token=your-access-token-goes-here
and when I put that in the browser I get:

{
  "ok": false,
  "error": "Unknown Variable: false"
}

@bko Yes I just discovered the console in my browser, great find. I entered the jquery URL into my browser and got a bunch of text, so i guess its finding it.

@rickkas7 I already tried removing the slash and I get the same result:(

7

Are you sure your variable name is correct?
If you want to make sure your setup is correct (other than that page), you can try requesting your variable here (and seeing if it shows up in the first place).
If you can’t see it in the browser by pasting that link, it’s not going to work in your javascript either.

8

Or like this in the browser

1 Like
9

@Moors7 Ah … in fact, yes I had the wrong variable name. :expressionless: I changed it and its now working. Thanks everyone.

2 Likes
10

Hence, such statements are a dangerous thing to make and we usually don't tend to take them that serious anyway :wink:

1 Like
11

Ok in order to redeem myself, I will at least post my code now that its all working.

This is very simple but I think useful demonstration of how to monitor and update particle values. All this app does is 1. check if an LED is currently powered on or off 2. update the switch (checkbox) and text on the webpage to the current state of the LED and 3. switch the LED on or off when the switch is pressed.

Particle code:

int led1 = D0;
int led2 = D7;
int stateLed = LOW;

void setup()
{

   pinMode(led1, OUTPUT);
   pinMode(led2, OUTPUT);

    Particle.function("led",ledToggle);
    Particle.variable("ledState", &stateLed, INT);
   digitalWrite(led1, LOW);
   digitalWrite(led2, LOW);

}



void loop()
{
}



int ledToggle(String command) {

    if (command=="1") {
        digitalWrite(led1,HIGH);
        digitalWrite(led2,HIGH);
        stateLed = HIGH;
        return 1;
    }
    else if (command=="0") {
        digitalWrite(led1,LOW);
        digitalWrite(led2,LOW);
        stateLed = LOW;
        
        return 0;
    }
    else {
        return -1;
    }
}

HTML:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
<!--<link type="text/css" rel="stylesheet" href="css/style.css" />-->

    <h1>UPDATING LED SWITCH</h1>
    <span id="ledPower">Waiting for data...</span><br>

    <div class="container style3 subcontainer">
        <input type="checkbox" name="arg" id="switch1" onClick='toggleValue()'>
        <label for="switch1"></label>
    </div>


</body>

</html>

Javascript:

var deviceID = "xxxxxxx";
var accessToken = "xxxxxxx";
var varName = "ledState";
var ledState;


$(document).ready(function () {
    console.log("ready!");
    getValue();
});



function getValue() {
    requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
    console.log(requestURL);
    $.getJSON(requestURL, function (json) {
        ledState = json.result;
        updateSwitch();
    });

}

function updateSwitch() {
    if (ledState == 0) {
        document.getElementById("switch1").checked = false;
        document.getElementById("ledPower").innerHTML = "led is now OFF";
    } else {
        document.getElementById("switch1").checked = true;
        document.getElementById("ledPower").innerHTML = "led is now ON";
    }

}

function toggleValue(obj) {
    var newValue;
    if (ledState == 1) {
        newValue = 0;
        document.getElementById("ledPower").innerHTML = "led is now OFF";
    } else {
        newValue = 1;
        document.getElementById("ledPower").innerHTML = "led is now ON";

    }
    sparkSetLed(newValue);
}

function sparkSetLed(newValue) {
    var setFunc = "led"
    var requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + setFunc + "/";
    $.post(requestURL, {
        params: newValue,
        access_token: accessToken
    });
    ledState = newValue;
}
5 Likes