Post Request on Mobile AngularJs

Troubleshooting
1

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

2

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
3

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