Angularjs change checkbox value according to server response

Question

I have two groups of checkboxes where users choose their options and save it to the database as a string.

Is it possible the get this string response back from the server and set each value back to the corresponding checkbox to keep it checked?

<form class="list">

    <ion-toggle toggle-class="toggle-balanced" ng-model="data.turnOnOff" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.showConfirm(data.turnOnOff)">Databases</ion-toggle>
    <div class="spacer" style="height: 10px;"></div>

    <ion-list ng-show="bd">
        <ion-checkbox ng-repeat="(key, value) in db" ng-model=value.checked ng-change="checka()">{{ value.text }}</ion-checkbox>
    </ion-list>
    <div class="spacer" style="height: 10px;"></div>


    <ion-toggle toggle-class="toggle-balanced" ng-model="data.escritorio" ng-true-value="'On'" ng-false-value="'Off'" ng-change="data.openEscritorio(data.escritorio)">Office</ion-toggle>
    <div class="spacer" style="height: 10px;"></div>

    <ion-list ng-show="officee">
        <ion-checkbox ng-repeat="(key, value) in office" ng-model=value.checked>{{ value.text }}</ion-checkbox>
    </ion-list>
    <div class="spacer" style="height: 10px;"></div>
</form>
<div class="spacer" style="height: 10px;"></div>
<button style="color:#FFFFFF;" class="button button-balanced button-block" ng-click="insert()">Ok</button>

controller

var id = localStorage.getItem("id");
var checkedData = [];

$scope.db = [
    {text:'Firebird', checked:'false'}, 
    {text:'MongoDB', checked:'false'}, 
    {text:'mSQL', checked:'false'}, 
    {text:'MySQL', checked:'false'}, 
    {text:'Oracle', checked:'false'}, 
    {text:'PostgreSQL', checked:'false'}, 
    {text:'TinySQL', checked:'false'}, 
    {text:'SQLite', checked:'false'}, 
    {text:'SQL Server', checked:'false'}, 
    {text:'Sybase', checked:'false'}, 
    {text:'Outros', checked:'false'}
]

$scope.office = [
    {text:'Microsoft Access', checked:'false'}, 
    {text:'Microsoft Excel', checked:'false'}, 
    {text:'Microsoft Outlook', checked:'false'}, 
    {text:'Microsoft PowerPoint', checked:'false'}, 
    {text:'Microsoft Word', checked:'false'}, 
    {text:'Open Office', checked:'false'}
]

$scope.data.turnOnOff = 'Off';
$scope.data.showConfirm = function(val){
    if(val === 'On'){
        $scope.bd = true;
    }else{
        $scope.bd = false;
    }
}

$scope.data.officee = 'Off';
$scope.data.openEscritorio = function(val){
    if(val === 'On'){
        $scope.officee = true;
    }else{
        $scope.officee = false;
    }
}

$scope.insert = function(){

    $ionicLoading.show({
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
    });

    angular.forEach($scope.db, function(key, value){
        if(key.checked == true){
            //checkedData.push(key.text);
            checkedData += key.text + ', ';
            console.log("database "+checkedData);
        }
    });

    angular.forEach($scope.office, function(key, value){
        if(key.checked == true){
            checkedData += key.text + ', ';
            console.log("databases "+checkedData);   
        }
    });

    checkedData = checkedData.substring(0, checkedData.length - 2);
    console.log("result: "+checkedData);

    InformaticaFac.getData(checkedData, id).then(function(response){

        console.log(JSON.stringify(response));

        if(response.data === "\"Error\""){
            $ionicLoading.hide();
            navigator.notification.alert("Error");

        }else{

            checkedData = response.data[0].DATABASERESP;

        }
    }, function(response){
            navigator.notification.alert("Error.");

    }).finally(function(){
        $timeout(function(){

            $ionicLoading.hide();                
            $state.go('page3');

        }, 2000); 
    });

}

response

checkedData = response.data[0].DATABASERESP;

"data":{"checkedData":"Firebird, MySQL, Oracle, Microsoft Excel, Microsoft Outlook, Microsoft PowerPoint, Microsoft Word","id":"1"}

I can't find where is variable that stores string response in your controller code. Also please provide string response example. — Leguest
– Leguest, Commented Apr 19, 2017 at 20:55
When asking a question about a problem caused by your code, you will get much better answers if you use as little code as possible that still produces the same problem. See How to create a Minimal, Complete, and Verifiable example. — georgeawg
– georgeawg, Commented Apr 20, 2017 at 6:57

Leguest · Accepted Answer · 2017-04-21 05:52:42Z

2

I see, so you can try this:

  var checkedData = response.data

  checkedData.checkedData.forEach(function(checkedName) {

      $scope.db.forEach(function(dbItem){

          if(dbItem.text == checkedName) {
                dbItem.checked = true;
          }

      })

      $scope.office.forEach(function(officeItem){

          if(officeItem.text == checkedName) {
                officeItem.checked = true;
          }

      })

  })

  // if you do it in .then(function) or any async function you need to call
  $scope.$apply() // to update checkboxes state

UPDATE

You forget to split string into array:

   checkedData.data.checkedData = checkedData.data.checkedData.split(', ');

So now we can do .forEach function

JSFiddle example

edited Apr 21, 2017 at 5:52

answered Apr 19, 2017 at 21:04

Leguest

2,1372 gold badges18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

madsongr Over a year ago

It is almost working good. It´s giving me SyntaxError: Unexpected token F in JSON at position 0 in JSON.parse line. I can get the objects if checkedData = response.data;

Leguest Over a year ago

Yes, I wrote that line for just in case, you can easily get rid off that. I updated my answer

madsongr Over a year ago

TypeError: Cannot read property 'forEach' of undefined on checkedData.checkedData.forEach(function(checkedName) line

madsongr Over a year ago

This is the response I get: [{"ID":"1","DATABASERESP":"Firebird, MongoDB, Open Office"}]

madsongr Over a year ago

I tried angular.forEach(checkedData, function(checkedName) but checkboxes did not change.

|

madsongr · Accepted Answer · 2017-04-21 20:51:18Z

0

I had to make some changes but my final result based on Leguest answer is:

checkedData= response.data[0].DATABASERESP;
console.log(checkedData);

checkedData = checkedData.split(', ');
console.log(checkedData);

angular.forEach(checkedData, function(checkedName){

    $scope.db.forEach(function(dbItem){

        if(dbItem.text == checkedName) {
            dbItem.checked = true;
        }

   });

   $scope.office.forEach(function(officeItem){

       if(officeItem.text == checkedName) {
            officeItem.checked = true;
       }

   });

});

answered Apr 21, 2017 at 20:51

madsongr

8051 gold badge14 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angularjs change checkbox value according to server response

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related