Fetching parent and child value from a nested json in angularjs

Question

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!

davidxxx · Accepted Answer · 2016-11-21 14:36:49Z

1

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>

edited Nov 21, 2016 at 14:36

answered Nov 17, 2016 at 14:47

davidxxx

132k23 gold badges231 silver badges228 bronze badges

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

4 Comments

Teddy Payne Over a year ago

Thanks a ton for the help, but I missed to mention a really important point, please have a look at my re-edited question.

davidxxx Over a year ago

Just set the isChecked property to true for desired children. You can do that from the original JSON object with a function or have a JSON object with values already set. I directly modified the JSON to go faster. I updated my answer and the plunkr

Teddy Payne Over a year ago

I have set the isChecked property for all the children to their respective values and then tried executing your code but couldn't get it working. It is giving me the values of all the checkboxes, irrespective of whether any selection has been done or not. Here is the plunker code.

davidxxx Over a year ago

sorry, it is boolean value, it should not be between quotes otherwise it is interepreted as a string and not a boolean value. I updated your plunker here : plnkr.co/edit/2zQWAk6YybCpzqNKgUkR?p=preview

etiennecrb · Accepted Answer · 2016-11-17 14:40:41Z

0

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);
    }
  });
});

answered Nov 17, 2016 at 14:40

etiennecrb

5972 silver badges10 bronze badges

1 Comment

Teddy Payne Over a year ago

Thank you for the help, but I missed to mention a really important point, please have a look at my re-edited question.

Collectives™ on Stack Overflow

Fetching parent and child value from a nested json in angularjs

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related