CODEWITHSUNDEEP
angularjsjsoncheckboxnested
Teddy Payne
Teddy Payne

Reputation: 109

Fetching parent and child value from a nested json in angularjs

I'm very much new to angularjs so I'm facing this issue where i have a nested json, and i am using the parent value as a header and the values of the child as checkboxes. Now, when I want to retrieve the value of those checkboxes which have been ticked, i want it in the format of {parent_name:child_name} stored in an array.

I'm using the following sample data taken from this thread.

Data:

parents : [{
    name: 'George',
    age: 44,
    children: [{
        name: 'Jack',
        age: 16, 
        isChecked: 'true'
    },{
        name: 'Amy',
        age: 13, 
        isChecked: 'false'
    }]
}, {
    name: 'Jimmy',
    age: 38,
    children: [{
        name: 'Max',
        age: 7, 
        isChecked: 'false'              
    },{
        name: 'Lily',
        age: 5, 
        isChecked: 'false'
    },{
        name: 'Kim',
        age: 4, 
        isChecked: 'true'
    }]
}]

And, my current output looks like this

My HTML code is

<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
  <div class="form-group">
  <label>{{parent.name}}</label>
  <div class="input-group" ng-repeat="child in parent.children">
    <label><input type="checkbox" ng-checked="child.isChecked=='true'"> {{child.name}}</label>
  </div>
  <hr>
</div>

Now, in reference to the image, I want to have {George:Jack} and {Jimmy:Kim} in an array, but i can't find a way to achieve that.

EDIT : I forgot to mention another important point, some checkboxes will be pre-selected. As per the data, checkbox for Jack and Kim will already be ticked on-load. I have to fetch the value for the pre-selected values as well as any newly checked checkboxes.

My Plunker code is here.

I hope my question is clear. Thanks in advance!

Upvotes: 0

Views: 2770

Answers (2)

davidxxx
davidxxx

Reputation: 131526

The proposed solution modifies your original JSON object.
If for some reasons, you have to keep the original JSON object, you should do a copy of it and store it in the controller scope (Angular has functions to do it). The idea is to add a isChecked attribute in the original JSON object which will be values to false by default and that will be set to true when the checkbox is selected or false when the checkbox is unselected. That is possible by using the ng-model directive which binds here a html input to a variable in JS side.

Here is the plunker : http://plnkr.co/edit/EzDp3mMtlnH3t4bIz8e6?p=preview with Angular js 1.5.

js 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';


  $scope.parents = [{
    name: 'George',
    age: 44,
    children: [{
        name: 'Jack',
        age: 16,
        isChecked: true;
    },{
        name: 'Amy',
        age: 13
    }]
}, {
    name: 'Jimmy',
    age: 38,
    children: [{
        name: 'Max',
        age: 7              
    },{
        name: 'Lily',
        age: 5
    },{
        name: 'Kim',
        age: 4,
        isChecked: true;
    }]
}]


$scope.submit= function(){

   var results = [];
   for (var i=0; i< $scope.parents.length; i++){

      var parent = $scope.parents[i];
        for (var j=0; j< parent.children.length; j++){

            var child =  parent.children[j];

            if (child.isChecked){
                results.push(parent.name +":"+ child.name);
            }
        }
   }

   //display info
   for ( i=0; i< results.length; i++){
    console.log(results[i]) ;
   }

}

});

html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

   <div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
     <div class="form-group">
       <label>{{parent.name}}</label>
       <div class="input-group" ng-repeat="child in parent.children">
          <label><input type="checkbox" ng-checked="child.isChecked=='true'" ng-model="child.isChecked">  
           {{child.name}}</label>
      </div>
      <hr>
    </div>
  </div>
   <button type="button" ng-click="submit()" class="btn btn-success width-80px">Submit</button>

  </body>

</html>

Upvotes: 1

etiennecrb
etiennecrb

Reputation: 597

Using the ngChecked directive, you can only mark the checkbox as checked if the expression (here child.checked=='true') is truthy. However, it doesn't affect the value of your variable child.checked.

I recommand you to use instead the ngModel directive which will bind the value of your checkbox with child.checked (or any other variable).

<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
  <div class="form-group">
    <label>{{parent.name}}</label>
  <div class="input-group" ng-repeat="child in parent.children">
    <label>
      <input type="checkbox" ng-model="child.checked">{{child.name}}
    </label>
  </div>
  <hr>
</div>

Since child.checked is not defined at the begining, it will be falsy so the checkbox won't be checked. You can change this behaviour by setting it to true.

Then, to create an array of your results, you can do something like this:

var results = [];
parents.forEach(function (parent) {
  parent.children.forEach(function (child) {
    if (child.checked) {
      var couple = {};
      couple[parent.name] = child.name;
      results.push(couple);
    }
  });
});

Upvotes: 0

Related Questions