how can I construct .post query based on checkboxes clicked on page with Angular.js?

Question

I have the following html form:

<form name="queryForm" class="form-inline text-center">
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkOne" value="one" ng-model="formData.one" ng-true-value="'one'" ng-init="formData.one='one'">
        One
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkTwo" value="two" ng-model="formData.two" ng-true-value="'two'" ng-init="formData.two='two'">
        Two
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkThree" value="three" ng-model="formData.three" ng-true-value="'three'" ng-init="formData.three='three'">
        Three
    </p>
    <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryNumbers()">Refresh</button>
</form>

and it shows 3 checkboxes on my page and a button. I want to construct a .post query to my webservice based on the values user selects. I wrote a function for that:

$scope.queryUsers = function(){

    var one = $scope.formData.one;
    var two = $scope.formData.two;
    var three = $scope.formData.three;

    var params = [];

    if(one){

    }
    if(two){

    }
    if(three){

    }

    //here I want to create a .post query
};

As for now, I have my webservice ready, it takes the json in the following format:

"one":"true" //can be false
"two":"true" //can be false
"three":"true" //can be false

I want to create a params array and create post query - how can I fill this array with true or false values for each number based on the checkboxs' values?

can you make an example of your array ideal format? – Francesco Nov 30 '16 at 15:04 — Francesco, Nov 30 '16 at 15:04

AlainIb · Answer 1 · 2016-11-30T15:13:54.600

official doc https://docs.angularjs.org/api/ng/service/$http

Working plunkr : http://plnkr.co/edit/D7AV2DavhvNny9rppy4r?p=preview

You have to do inject '$http' in your controller depence :

myApp.controller('Ctrl1', ['$scope','$http',  function($scope,$http) {

then : JS

$scope.queryUsers = function() {
    console.clear();
    var one = $scope.formData.one;
    var two = $scope.formData.two;
    var three = $scope.formData.three;

    //here I want to create a .post query

    $http({
      method: 'POST',
      url: 'path/to/service', // put your url her
      data: {
        "one": one,
        "two": two,
        "three": three
      }

    }).then(function successCallback(response) {
      // success 
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

  };

html :

<form name="queryForm" class="form-inline text-center">
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkOne" value="one" ng-model="formData.one" ng-init="formData.one=false">
        One
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkTwo" value="two" ng-model="formData.two" ng-init="formData.two=false">
        Two
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkThree" value="three" ng-model="formData.three" ng-init="formData.three=false">
        Three
    </p>
    <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryUsers()">Refresh</button>
</form>

Thanks @AlainIb, and one more thing - can you tell me how I could construct the array instead of passing arguments directly? I mean - I need to create an array first and then - in the `.post` query refer to each element of that array — user3766930, Nov 30 '16 at 14:58
give the array you want. you say you want a json with bool value ? — AlainIb, Nov 30 '16 at 14:59
an array like `[ ]` or associative array like `{ }` . my solution already send an associative array — AlainIb, Nov 30 '16 at 15:06
i update answer, look at the plunkr, open console ( f12 ) and click on refresh button in your form, look at the POST made — AlainIb, Nov 30 '16 at 15:14
hm with that approach I'm getting error `$http(...).then(...).error is not a function`, do you know why it might be a problem? — user3766930, Nov 30 '16 at 15:49
did you inject $http in your controller like this `myApp.controller('Ctrl1', ['$scope','$http', function($scope,$http) {` — AlainIb, Nov 30 '16 at 17:30

Mihai Alexandru-Ionut · Answer 2 · 2016-11-30T15:32:02.453

1)You need to create an associative array,something like this:

var app=angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.queryNumbers = function(){
    var one = $scope.formData.one;
    var two = $scope.formData.two;
    var three = $scope.formData.three;

    var params = {};
    params["one"]=one!='one';
    params["two"]=two!='two';
    params["three"]=three!='three';
    console.log(params);
};
})

.done-true {
  text-decoration: line-through;
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp">
    
    <div ng-controller="myCtrl">
       <form name="queryForm" class="form-inline text-center">
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkOne" value="one" ng-model="formData.one" ng-true-value="'one'" ng-init="formData.one='one'">
        One
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkTwo" value="two" ng-model="formData.two" ng-true-value="'two'" ng-init="formData.two='two'">
        Two
    </p>
    <p class="checkbox-inline onlinecheckbox">
        <input type="checkbox" class="onlinecheckbox" name="optionsRadios" id="checkThree" value="three" ng-model="formData.three" ng-true-value="'three'" ng-init="formData.three='three'">
        Three
    </p>
    <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryNumbers()">Refresh</button>
</form>
      </div>
    </div>

2) Don't forget to send data to server using JSON.stringify(object);

JSON.stringify function turns a Javascript object into JSON text and stores it in a string.

In your case you need to use something like this:

$http({
  method: 'POST',
  url: 'you_method_url',
  data:JSON.stringify(params)
}).then(..);

this is not an array, but an associative array or object . array is [ ] — AlainIb, Nov 30 '16 at 15:03

score 1 · Answer 3 · edited May 23 '17 at 12:33

1

You can use $http, but if you are calling a RESTful API, I would suggest you to use $resource (see documentation).

See more here.

Personally, I prefer to use it inside of a service.

app.factory('Articles',
  ($resource) => (
    $resource(`/path/to/articles/:articleId`)
  ));

edited May 23 '17 at 12:33

Community

1
1

answered Nov 30 '16 at 15:02

vjarysta

61
1
7

score 1 · Answer 4 · answered Nov 30 '16 at 15:14

I would try to make things a bit more generic.

First at all is bad to have the same name attr for multiple input elements.

<form name="queryForm" class="form-inline text-center">
  <p class="checkbox-inline onlinecheckbox">
    <input type="checkbox" class="onlinecheckbox" name="one" id="checkOne" value="one" ng-model="formData.one" ng-true-value="'one'" ng-init="formData.one='one'">One
  </p>
  <p class="checkbox-inline onlinecheckbox">
    <input type="checkbox" class="onlinecheckbox" name="two" id="checkTwo" value="two" ng-model="formData.two" ng-true-value="'two'" ng-init="formData.two='two'">Two
  </p>
  <p class="checkbox-inline onlinecheckbox">
    <input type="checkbox" class="onlinecheckbox" name="three" id="checkThree" value="three" ng-model="formData.three" ng-true-value="'three'" ng-init="formData.three='three'">Three
  </p>
  <button type="submit" class="btn btn-fill btn-info" style="margin-top:24px;margin-left:8px" ng-click="queryNumbers()">Refresh</button>
</form>

Then you can access the form by his name in the angular scope and play with the inputs inside without actally know the names!

var form = $scope.queryForm;
var params = [];

for (let name in form) {
  if (form.hasOwnProperty(name) && typeof form[name] === 'object' && form[name].hasOwnProperty('$modelValue')) {
    // build the array as you want here
    params.push($scope.formData[name]);
  }
}

how can I construct .post query based on checkboxes clicked on page with Angular.js?

4 Answers4