Attempting to control an array of objects

Question

Attempting to control an array of objects

In my current records:

The parts with IDs 14.3, 14.2, and 14.1 belong to part ID = 30.

The goal is to achieve the following:

1) By default, the first two IDs will be selected. If a user tries to select ID = 71, which belongs to part 30, they should not be allowed because a higher version of part 30 (ID = 76) is already selected.

2) If a user unchecks ID = 77(33), then they should be allowed to check ID=71 because there are no different parts selected. The user should be allowed to check all parts with ID = 30 but as soon as a different part is selected, the lower part should be unchecked.

Issue with the code:

1) When I uncheck 16.1 and try to check 14.2, I am not allowed to do so even though there are no different parts selected.

2) Both 16.1 and 14.3 are checked by default. Now if I check 15.1 and then check 14.1, it causes 14.3 to get unchecked, which is incorrect as 14.3 is the highest among part ID = 30, so I shouldn't be able to check 14.1.

  
                var app = angular.module('myApp', []);
                app.controller('myCtrl', function ($scope) {
                    $scope.myArray = [
                        {
                            "id": 77,
                            "selected": true,
                            "part": 33,
                            "name": "16.1", 
                         },
                        // Include the rest of the array items here...
                    ];
                    
                    // Function for checking item selection logic
                    $scope.checkItem = function (item) {
                        // Write your logic here
                    };
                });


                <!DOCTYPE html>
                <html ng-app="myApp" ng-controller="myCtrl">
                <!-- HTML content removed -->
                </html>

javascript angularjs

Answer 1

Answer №1

My preferred approach involves separating some of the logic into a service to maintain clean code. This strategy makes it easier for me to manage, debug, and test the code effectively. Check out this fiddle

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

 app.controller('myCtrl', function($scope, myCollection) {
   $scope.myArray = myCollection.items;

   // Invoke function whenever an item is checked
   $scope.checkItem = function(item) {

     // Rearrange collection items before and after 
     myCollection.mapCheckedItems();

     // Perform actions based on user interaction only if there are
     // multiple selected parts by definition
     if (item.selected && myCollection.selectedPartsOnly.length > 1) {

       // Iterate through the selected parts
       myCollection.selectedPartsOnly.map(part => {

         // Retrieve the array of items associated with the specific part number
         var map = myCollection.selectedPartsMap[part];

         for (var j = map.length - 1; j > 0; j--) {
           // Deselect all except the highest version by definition.
           // This occurs when different part numbers are selected simultaneously
           map[j].selected = false;
         }
       })

     }

     // Update collection map to synchronize with the
     // items' array
     myCollection.mapCheckedItems();

   };

 });

 app.service('myCollection', function() {
   // Initialize the collection object
   var self = {};

   // Function to calculate and map items' dependencies
   self.mapCheckedItems = mapCheckedItems;

   // Store a list of selected unique part numbers
   // Helps determine necessary actions easily. If only 
   // one part number is selected, iterate through the map
   self.selectedPartsOnly = [];

   // Dictionary mapping part numbers to their child items
   // Enables easy access to items grouped by part number
   self.selectedPartsMap = {};

   // Define the actual array of items
   self.items = [{
     "id": 77,
     "selected": true,
     "part": 33,
     "name": "16.1",
   }, {
    ... (remaining original data omitted for brevity)
   }];

   // Initialize the helpers once at start. Executes just once
   mapCheckedItems();

   // Return the service object for controller access
   return self;

   // Create and update the objects mapping in this function
   function mapCheckedItems() {

     // Reset the helper variables
     self.selectedPartsOnly = [];
     self.selectedPartsMap = {};
     
     // Iterate through the selected items         
     self.items
       .filter(item => item.selected)
       .map(item => {

         // Map each selected item directly to a part number
         mapSelectedParts(item);

         // Identify which part numbers are in use
         mapSelectedPartsOnly(item.part);
       })
   }

   function mapSelectedPartsOnly(part) {
     if (self.selectedPartsOnly.indexOf(part) == -1)
       self.selectedPartsOnly.push(part);
   }

   function mapSelectedParts(item) {
     if (!self.selectedPartsMap[item.part])
       self.selectedPartsMap[item.part] = [];

     self.selectedPartsMap[item.part].push(item);
   }

 })

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-repeat="item in myArray">
        <input ng-model="item.selected" ng-click="checkItem(item)" type="checkbox" />{{ item.name }}
    </div>
</body>
</html>

Answer 2

My preferred approach involves separating some of the logic into a service to maintain clean code. This strategy makes it easier for me to manage, debug, and test the code effectively. Check out this fiddle

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

 app.controller('myCtrl', function($scope, myCollection) {
   $scope.myArray = myCollection.items;

   // Invoke function whenever an item is checked
   $scope.checkItem = function(item) {

     // Rearrange collection items before and after 
     myCollection.mapCheckedItems();

     // Perform actions based on user interaction only if there are
     // multiple selected parts by definition
     if (item.selected && myCollection.selectedPartsOnly.length > 1) {

       // Iterate through the selected parts
       myCollection.selectedPartsOnly.map(part => {

         // Retrieve the array of items associated with the specific part number
         var map = myCollection.selectedPartsMap[part];

         for (var j = map.length - 1; j > 0; j--) {
           // Deselect all except the highest version by definition.
           // This occurs when different part numbers are selected simultaneously
           map[j].selected = false;
         }
       })

     }

     // Update collection map to synchronize with the
     // items' array
     myCollection.mapCheckedItems();

   };

 });

 app.service('myCollection', function() {
   // Initialize the collection object
   var self = {};

   // Function to calculate and map items' dependencies
   self.mapCheckedItems = mapCheckedItems;

   // Store a list of selected unique part numbers
   // Helps determine necessary actions easily. If only 
   // one part number is selected, iterate through the map
   self.selectedPartsOnly = [];

   // Dictionary mapping part numbers to their child items
   // Enables easy access to items grouped by part number
   self.selectedPartsMap = {};

   // Define the actual array of items
   self.items = [{
     "id": 77,
     "selected": true,
     "part": 33,
     "name": "16.1",
   }, {
    ... (remaining original data omitted for brevity)
   }];

   // Initialize the helpers once at start. Executes just once
   mapCheckedItems();

   // Return the service object for controller access
   return self;

   // Create and update the objects mapping in this function
   function mapCheckedItems() {

     // Reset the helper variables
     self.selectedPartsOnly = [];
     self.selectedPartsMap = {};
     
     // Iterate through the selected items         
     self.items
       .filter(item => item.selected)
       .map(item => {

         // Map each selected item directly to a part number
         mapSelectedParts(item);

         // Identify which part numbers are in use
         mapSelectedPartsOnly(item.part);
       })
   }

   function mapSelectedPartsOnly(part) {
     if (self.selectedPartsOnly.indexOf(part) == -1)
       self.selectedPartsOnly.push(part);
   }

   function mapSelectedParts(item) {
     if (!self.selectedPartsMap[item.part])
       self.selectedPartsMap[item.part] = [];

     self.selectedPartsMap[item.part].push(item);
   }

 })

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-repeat="item in myArray">
        <input ng-model="item.selected" ng-click="checkItem(item)" type="checkbox" />{{ item.name }}
    </div>
</body>
</html>

Answer 3

Answer №2

I have devised a solution that addresses both points and resolves the issues mentioned above.

To implement this, you just need to update the checkItem function in the controller.

$scope.checkItem = function(item) {
  // Code implementation here
};

You can view a working example on this fiddle.

Answer 4

I have devised a solution that addresses both points and resolves the issues mentioned above.

To implement this, you just need to update the checkItem function in the controller.

$scope.checkItem = function(item) {
  // Code implementation here
};

You can view a working example on this fiddle.

Attempting to control an array of objects

Answer №1

Answer №2

Similar questions

Opposite path matching with Next.js middleware

Utilizing jQuery.post to generate a dynamic dropdown menu

Where is the destination of the response in a Client-Side API Call?

Concealing a div based on the checkbox's updated selection

I require the capability to retrieve JSON data from beyond the confines of the function

Extract JSON content from an array's values containing underscores

Modifying the color of specific sections of SVG elements

Having trouble with the click button flip function? It seems to be working in one section but not in

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

Implementing Angular checkbox repetition controlled from an external controller

unable to submit form using angular and express

The Javascript function fails to trigger during the OnKeyPress and OnKeyDown events

The Controller's ActionResult methods are not successfully collecting form data sent through an ajax request

What is the best way to correctly render several React components using a single index.js file?

Automatically update Dropdown options with value and text through an ajax json request

A guide to troubleshooting the "Cannot resolve all parameters error" in Angular

What is preventing me from loading js and css files on my web pages?

What are some ways to get Angular2 up and running in a newly created distribution directory?

When additional elements follow, the button ceases to function properly in JavaScript

Simultaneous malfunction of two ajax forms