Get parent data from nested json in AngularJS controller

Question

As my Title, I'd like to get parent data from nested json. I know how to do it in HTML. And I'd like to know how to do it in controllers.

Here is my directive with nested json

.factory('dataFac', function(){
return {
    parents : [{
        name: 'George',
        age: 44,
        children: [{
            name: 'Jack',
            age: 16
        },{
            name: 'Amy',
            age: 13
        }]
    }, {
        name: 'Jimmy',
        age: 38,
        children: [{
            name: 'Max',
            age: 7              
        },{
            name: 'Lily',
            age: 5
        },{
            name: 'Kim',
            age: 4
        }]
    }]
}})

Controller

.controller('dataCtrl', function($scope, $location, dataFac) {
  $scope.data = dataFac.parents;

  //here I'd like to get name of parents
  $scope. = ;

  //here I'd like to get name of children
  $scope. = ;

  //and when I get the data of the children, I can get their parents' name
  $scope. = ;

  console.log($scope.navbars.id);

  $scope.isActive = function(route) {
      return route === $location.path();
  };})

Appreciate if someone could help.

isn't parent name is in $scope.data[i].name ?

Tuan Anh Tran
– Tuan Anh Tran

2015-05-19 02:52:15 +00:00
Commented May 19, 2015 at 2:52 — Tuan Anh Tran
– Tuan Anh Tran, Commented May 19, 2015 at 2:52
@TuanAnhTran If I want to get all of parents name?

doreentseng
– doreentseng

2015-05-19 03:00:38 +00:00
Commented May 19, 2015 at 3:00 — doreentseng
– doreentseng, Commented May 19, 2015 at 3:00
looop through the $scope.data then?

Tuan Anh Tran
– Tuan Anh Tran

2015-05-19 03:24:55 +00:00
Commented May 19, 2015 at 3:24 — Tuan Anh Tran
– Tuan Anh Tran, Commented May 19, 2015 at 3:24

Alhuck · Accepted Answer · 2015-05-19 03:36:18Z

2

You can get the name of parents and the children names using forEach function in angularjs and looping through the json data.,

Here is the code

app.controller('myController', function($scope, dataFac) {
 $scope.data = dataFac.parents;
 $scope.parentsName = [];
 $scope.childName = [];
//here I'd like to get name of parents

 angular.forEach(dataFac.parents, function(parent) {
    $scope.parentsName.push({
     name: parent.name
    });
     angular.forEach(parent.children, function(child) {
      //here I'd like to get name of children

      $scope.childName.push({
       childName: child.name,
       parentName: parent.name
      });
    });
 });
});

Update: If you want, push parent name into children array and access it from there.

Here is the working plunker with the code

http://embed.plnkr.co/9HCJy554oTSKxrdtiNR4/preview

Hope this helps!

edited May 19, 2015 at 3:36

answered May 19, 2015 at 3:09

Alhuck

1,0298 silver badges11 bronze badges

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

3 Comments

doreentseng Over a year ago

Thanks! It works well! And there's still a question, what if I want to get parents' name from children's array?

Tuan Anh Tran Over a year ago

@Gloria i take that the children names are unique. You can loop through parents, then loop through children list again, return when found. It's pretty straight forward.

doreentseng Over a year ago

@AlhuckA Thank you so much for the answer. I thought I make it complicated. It's very clear!

Collectives™ on Stack Overflow

Get parent data from nested json in AngularJS controller

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related