Post Request on Mobile AngularJs

I am trying to do this guide in angularjs on a mobile app:
https://docs.particle.io/guide/getting-started/examples/core/

/* Paste the code between the dashes below into a .txt file and save it as an .html file. Replace your-device-ID-goes-here with your actual device ID and your-access-token-goes-here with your actual access token.


<!-- Replace your-device-ID-goes-here with your actual device ID
and replace your-access-token-goes-here with your actual access token-->
<!DOCTYPE>
<html>
  <body>
  <center>
  <br>
  <br>
  <br>
  <form action="https://api.particle.io/v1/devices/your-device-ID-goes-here/led?access_token=your-access-token-goes-here" method="POST">
    Tell your device what to do!<br>
    <br>
    <input type="radio" name="arg" value="on">Turn the LED on.
    <br>
    <input type="radio" name="arg" value="off">Turn the LED off.
    <br>
    <br>
    <input type="submit" value="Do it!">
  </form>
  </center>
  </body>
</html>

*/

I am able to get the above code working when running it as an html page. This can turn on and off the led.

Now I am trying to use this
https://docs.particle.io/reference/api/#call-a-function

to call a post request.

Here is my code:

  turnOn(
  ): Promise<void> {
let headers = new Headers(
{
  'Content-Type' : 'application/application/x-www-form-urlencoded'
});
let options = new RequestOptions({ headers: headers });

let data = JSON.stringify({
  arg: "on"
});

    console.log(data);

  return new Promise((resolve, reject) => {
  this.http.post(this.url, data, options)
  .toPromise()
  .then((response) =>
  {
    console.log('API Response : ', response.json());
    resolve(response.json());
  })
  .catch((error) =>
  {
    console.error('API Error : ', error.status);
    console.error('API Error : ', JSON.stringify(error));
    reject(error.json());
  });
});
  }
  
  turnOff(
  ): Promise<void> {
let headers = new Headers(
{
  'Content-Type' : 'application/application/x-www-form-urlencoded'
});
let options = new RequestOptions({ headers: headers });      

let data = JSON.stringify({
  arg: "off"
});

console.log(data);

      return new Promise((resolve, reject) => {
  this.http.post(this.url, data, options)
  .toPromise()
  .then((response) =>
  {
    console.log('API Response : ', response.json());
    resolve(response.json());
  })
  .catch((error) =>
  {
    console.error('API Error : ', error.status);
    console.error('API Error : ', JSON.stringify(error));
    reject(error.json());
  });
});
  }

I am able to get a response:

  "id": "0123456789abcdef01234567",
  "last_app": "",
  "connected": true,
  "return_value": -1

When running it on the website, the return value was 1 when I made it turn on, and 0 when I made it turn off using the html code.

When running in angularjs however it doesn’t work and I get the return value -1

Have you considered using the ParticleJS library to simplify matters?
Otherwise, it seems as though your arguments aren’t making it through correctly (if at all). The formatting of the code above is a bit of a mess, so I’m struggling to read it, but take another look at you arguments. The developer console of you browser is often a useful tool to see what data is being sent/received as well.

1 Like

There are at least two problems:

  • You set your content type to “application/application/x-www-form-urlencoded” but there are too many “application/” in the string.
  • Even though you set the content type, you’re not actually encoding the body as x-www-form-urlencoded, you’re sending it as JSON.

The easiest solution to this is to send the data to the Particle cloud as JSON, because that’s allowed. Set the Content-Type to ‘application/json’ instead.

1 Like