Is there a way to categorize items from various arrays together?

Question

Is there a way to categorize items from various arrays together?

I've successfully grouped child objects with parent objects using a concise example available on Plunker

The methodology of nesting objects in one array makes perfect sense to me. Now, I'm interested in utilizing two distinct scope arrays for demonstration purposes like the Company(parent) - workers(child) scenario:

$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" }
]

Although I've put in my best effort and researched extensively, I haven't been able to accomplish this task independently. I have yet to come across relevant information that addresses my specific requirements.

If anyone could provide me with some guidance or point me towards a helpful article, I would greatly appreciate it. Thank you!

javascript arrays angularjs

Answer 1

Answer №1

It seems necessary to include a reference to the parent index in your child scope, for example:

$scope.parent = [{id: 1, name: "Adidas", productOf:"Germany"},
                 {id: 2, name: "Puma", productOf:"DE"},
                 {id: 3, name: "XYZ", productOf:"FR"}]
$scope.child = [{ id:1, firstName:"Jane", lastName:"Smith", pid:1},
                { id:2, firstName:"Jack", lastName:"Johnson", pid:2 },
                { id:3, firstName:"Jill", lastName:"Robinson", pid:3 }

]

Answer 2

It seems necessary to include a reference to the parent index in your child scope, for example:

$scope.parent = [{id: 1, name: "Adidas", productOf:"Germany"},
                 {id: 2, name: "Puma", productOf:"DE"},
                 {id: 3, name: "XYZ", productOf:"FR"}]
$scope.child = [{ id:1, firstName:"Jane", lastName:"Smith", pid:1},
                { id:2, firstName:"Jack", lastName:"Johnson", pid:2 },
                { id:3, firstName:"Jill", lastName:"Robinson", pid:3 }

]

Answer 3

Answer №2

First and foremost, it is imperative to have a mapping field linking the company in the workers array. Once this is in place, you can utilize the filter function within 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" },

Here's how it looks in HTML:

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

For a practical demonstration, refer to this Plunker example.

Answer 4

First and foremost, it is imperative to have a mapping field linking the company in the workers array. Once this is in place, you can utilize the filter function within 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" },

Here's how it looks in HTML:

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

For a practical demonstration, refer to this Plunker example.

Answer 5

Answer №3

Upon reviewing your Plunker:

Click to View File

This is the code snippet provided:

<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>

Your Plunker also contains the following code:

Script.JS

Here is the AngularJS script included in your project:

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

$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 }

            ]

});

Answer 6

Upon reviewing your Plunker:

Click to View File

This is the code snippet provided:

<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>

Your Plunker also contains the following code:

Script.JS

Here is the AngularJS script included in your project:

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

$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 }

            ]

});

Is there a way to categorize items from various arrays together?

Answer №1

Answer №2

Answer №3

Similar questions

How can I effectively use gulp-sourcemaps in an Angular application using the IIFE pattern? Can someone confirm if my understanding of sourcem

Addressing the Cross Domain Issue when Implementing DHIS 2 API with jQuery

Is Javascript the best choice for managing multiple instances of similar HTML code?

Employing v-btn for navigating to a different route depending on whether a specific condition is satisfied

Angular 8 application experienced an error while attempting to load an external JavaScript library with a require() statement

The Express GET route does not support parameters or additional paths

Deliver XML document to client from an ASP.NET MVC webpage

The task "grunt-karma.js" is currently being loaded, but unfortunately an error has occurred: SyntaxError - An unexpected identifier was found

What is the process for including an SVG file in my JavaScript .textContent?

What is the best way to append an element to the end of an array in Angular JS?

Using AngularJS to Send Arrays of Objects to PHP

Having trouble with the functionality of jQuery .not?

Although JavaScript Handlebars does not show any errors, it fails to function properly

Examples, templates, and best practices for creating top-notch API documentation

Converting SHA1 function from JavaScript to Python

In the realm of JavaScript, consider logging a message to the console if the array value happens to be

Utilizing JSONP callbacks in Dart

Divide an HTML file into separate documents upon submitting a form

Initiating communication with a web service API

The application is experiencing extended loading times during production