Grouping objects from multiple arrays?

Question

I am grouping child objects with parent objects. I have a short working example on Plunker

It works fine, and I understand the principle of nesting objects in one array. Now I would like to use two different scope arrays. Company(parent) - workers(child) example:

$scope.parent = [{id: 1, name: "Nike", productOf:"USA"}]
$scope.child = [{ id:1, firstName:"John", lastName:"Doe" },
                { id:2, firstName:"John2", lastName:"Doe2" },
                { id:3, firstName:"John3", lastName:"Doe3" }
]

I've really tried to do this on my own, I read a lot of articles, but I didn't find what I need.

Can somebody give me a hint what to do, or a link for an article? Thank you!

The output should be the same as it is now on Plunker. This is an assignment — John Charger
– John Charger, Commented Jan 28, 2016 at 9:46
I do not see any relation(common value) between parent and child.. — Rayon
– Rayon, Commented Jan 28, 2016 at 9:50
I should something 歐津柏 said. child id points to parent id. — John Charger
– John Charger, Commented Jan 28, 2016 at 9:54

歐津柏 · Accepted Answer · 2016-01-28 09:48:05Z

2

I think you will need a reference parent index in your child scope, something like

$scope.parent = [{id: 1, name: "Nike", productOf:"USA"},
                 {id: 2, name: "Fila", productOf:"CH"},
                 {id: 3, name: "BLA", productOf:"UK"}]
$scope.child = [{ id:1, firstName:"John", lastName:"Doe", pid:1},
                { id:2, firstName:"John2", lastName:"Doe2", pid:2 },
                { id:3, firstName:"John3", lastName:"Doe3", pid:3 }

]

answered Jan 28, 2016 at 9:48

歐津柏

945 bronze badges

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

Comments

vagsa · Accepted Answer · 2016-01-28 10:02:19Z

1

Anyway, you must have mapping field to company in workers array, then you can use use filter in ng-repeat.

$scope.workers = [
        { id:1, companyId:1, firstName:"John", lastName:"Doe" },
        { id:2, companyId:2, firstName:"John2", lastName:"Doe2" },
        { id:3, companyId:3, firstName:"John3", lastName:"Doe3" },

Html:

<div ng-repeat="worker in workers | filter:{companyId:company.id}">

See example on Plunker

answered Jan 28, 2016 at 10:02

vagsa

461 silver badge3 bronze badges

1 Comment

John Charger Over a year ago

This is exactly what I needed!

Amit Ramoliya · Accepted Answer · 2016-01-28 10:15:20Z

As per your Plunker:

View File

<div class="container">
    <div class="col-lg-6">
        <h2 class="mainTitle">Click on group</h2>   
    </div>
<div ng-repeat="company in parentObj" class="header" ng-click="show=!show">
  {{company.name}}-{{company.productOf}}

<div ng-show="show">
     <div ng-repeat="worker in childObj" >
         <p ng-if="worker.parent==company.id">{{worker.firstName}} {{worker.lastName}}</p>

     </div>
</div>

</div>

Script.JS

angular.module('myApp', ['angular.filter']) .controller('myCtrl', function ($scope, $http) {

  $scope.parentObj = [
                 {id: 1, name: "Nike", productOf:"USA"},
                 {id: 2, name: "Fila", productOf:"CH"},
                 {id: 3, name: "BLA", productOf:"UK"}
                 ]

  $scope.childObj = [

            { id:1, firstName:"John", lastName:"Doe", parent:1},
            { id:2, firstName:"John2", lastName:"Doe2", parent:1 },
            { id:3, firstName:"John3", lastName:"Doe3", parent:1 },
            { id:1, firstName:"John4", lastName:"Doe4" , parent:2},
            { id:2, firstName:"John5", lastName:"Doe5", parent:2 },
            { id:3, firstName:"John6", lastName:"Doe6", parent:2 },
             { id:1, firstName:"John7", lastName:"Doe7", parent:3 },
            { id:2, firstName:"John8", lastName:"Doe8", parent:3 },
            { id:3, firstName:"John9", lastName:"Doe9", parent:3 }

            ]

});

Collectives™ on Stack Overflow

Grouping objects from multiple arrays?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related