"Unleashing the Power of ngSelect: Organizing Options with Infinite Depth

Question

"Unleashing the Power of ngSelect: Organizing Options with Infinite Depth

Within my application, there is an array of objects structured as follows:

[{"ID":1, "parentID":0, "name":"Parent #1"}, 
{"ID":2, "parentID":0, "name":"Parent #2"}, 
{"ID":3, "parentID":1, "name":"Child #1 1"}, 
{"ID":4, "parentID":3, "name":"child #1 2"},
{"ID":5, "parentID":2, "name":"child #2 1"},
{"ID":6, "parentID":5, "name":"child #2 2"}]

I am looking to create a select menu that allows users to choose a leaf node while displaying the non-selectable parent nodes to show the hierarchy.

I have experimented with various approaches and found some success using the following template in Angular:

<div ng-repeat="(idx, category) in $scope.allCats">
    <select ng-model="$scope.cats[idx]" 
            ng-options="cat as cat.name group by $scope.parentName(cat.parentID, idx) for cat in $scope.allCategories track by cat.ID">
        <option value="">Select A Category</option>
    </select>
</div>

The $scope.allCats array contains the data mentioned above, and the $scope.parentName() method returns a string.

However, I encountered issues where parent items displayed twice - once as an option and once as an optgroup. Additionally, the structure did not maintain the correct family tree relationships.

https://i.sstatic.net/PlYSj.png

How can I adjust my data or Angular template to achieve the desired behavior? Specifically, I want to display the entire hierarchy based on the parentID attributes, ensuring each family shares a common ancestor and displaying parent items only once.

The complexity arises from having multiple levels of descendants and wanting to keep the solution general.

javascript angularjs

Answer 1

Answer №1

Have you considered organizing the array in the scope before sending it to the angular template? For instance, if you start with:

var arr = [
  {"ID":1, "parentID":0, "name":"Parent #1"}, 
    {"ID":3, "parentID":1, "name":"Child #1 1"}, 
      {"ID":4, "parentID":3, "name":"child #1 2"},
        {"ID":7, "parentID":4, "name":"asdfadsf"},
  {"ID":2, "parentID":0, "name":"Parent #2"}, 
    {"ID":5, "parentID":2, "name":"child #2 1"},
      {"ID":6, "parentID":5, "name":"child #2 2"}
];

This approach could simplify things. All you need to do is show the array as it is.

Sorting Code:

var sortKeys = {};

// create a unique sorting key
function getSortKey(item) {
  if(sortKeys[item.ID] === undefined) {
    var parentItem = arr.filter(function(it) {
      return it.ID === item.parentID;
    })[0];

    if(parentItem != null) {
      return getSortKey(parentItem)  + '' + item.ID;
    }

    return item.parentID + '' + item.ID;
  }

  return sortKeys[item.ID];
}

// generate sort keys for sorting items based on hierarchy
arr.forEach(function(item) {
  sortKeys[item.ID] = getSortKey(item);
});

// sort the array
arr.sort(function(item1, item2) {    
  var item1SortKey = sortKeys[item1.ID],
      item2SortKey = sortKeys[item2.ID];

  return item1SortKey < item2SortKey ?
    -1 :
    (item1SortKey > item2SortKey ?
      1:
      0);
});

var arr = [{"ID":1, "parentID":0, "name":"Parent #1"}, 
{"ID":2, "parentID":0, "name":"Parent #2"}, 
{"ID":3, "parentID":1, "name":"Child #1 1"}, 
{"ID":4, "parentID":3, "name":"child #1 2"},
{"ID":5, "parentID":2, "name":"child #2 1"},
{"ID":6, "parentID":5, "name":"child #2 2"},
{"ID":7, "parentID":4, "name":"asdfadsf"}];

var sortKeys = {};

// create a unique sorting key
function getSortKey(item) {
  if(sortKeys[item.ID] === undefined) {
    var parentItem = arr.filter(function(it) {
      return it.ID === item.parentID;
    })[0];

    if(parentItem != null) {
      return getSortKey(parentItem)  + '' + item.ID;
    }

    return item.parentID + '' + item.ID;
  }
  
  return sortKeys[item.ID];
}

// generate sort keys for sorting items based on hierarchy
arr.forEach(function(item) {
  sortKeys[item.ID] = getSortKey(item);
});

// sort the array
arr.sort(function(item1, item2) {    
  var item1SortKey = sortKeys[item1.ID],
      item2SortKey = sortKeys[item2.ID];
  
  return item1SortKey < item2SortKey ?
    -1 :
    (item1SortKey > item2SortKey ?
      1:
      0);
});

document.getElementById('result').innerHTML = JSON.stringify(arr, null, 2);

<pre id="result"></pre>

Answer 2

Have you considered organizing the array in the scope before sending it to the angular template? For instance, if you start with:

var arr = [
  {"ID":1, "parentID":0, "name":"Parent #1"}, 
    {"ID":3, "parentID":1, "name":"Child #1 1"}, 
      {"ID":4, "parentID":3, "name":"child #1 2"},
        {"ID":7, "parentID":4, "name":"asdfadsf"},
  {"ID":2, "parentID":0, "name":"Parent #2"}, 
    {"ID":5, "parentID":2, "name":"child #2 1"},
      {"ID":6, "parentID":5, "name":"child #2 2"}
];

This approach could simplify things. All you need to do is show the array as it is.

Sorting Code:

var sortKeys = {};

// create a unique sorting key
function getSortKey(item) {
  if(sortKeys[item.ID] === undefined) {
    var parentItem = arr.filter(function(it) {
      return it.ID === item.parentID;
    })[0];

    if(parentItem != null) {
      return getSortKey(parentItem)  + '' + item.ID;
    }

    return item.parentID + '' + item.ID;
  }

  return sortKeys[item.ID];
}

// generate sort keys for sorting items based on hierarchy
arr.forEach(function(item) {
  sortKeys[item.ID] = getSortKey(item);
});

// sort the array
arr.sort(function(item1, item2) {    
  var item1SortKey = sortKeys[item1.ID],
      item2SortKey = sortKeys[item2.ID];

  return item1SortKey < item2SortKey ?
    -1 :
    (item1SortKey > item2SortKey ?
      1:
      0);
});

var arr = [{"ID":1, "parentID":0, "name":"Parent #1"}, 
{"ID":2, "parentID":0, "name":"Parent #2"}, 
{"ID":3, "parentID":1, "name":"Child #1 1"}, 
{"ID":4, "parentID":3, "name":"child #1 2"},
{"ID":5, "parentID":2, "name":"child #2 1"},
{"ID":6, "parentID":5, "name":"child #2 2"},
{"ID":7, "parentID":4, "name":"asdfadsf"}];

var sortKeys = {};

// create a unique sorting key
function getSortKey(item) {
  if(sortKeys[item.ID] === undefined) {
    var parentItem = arr.filter(function(it) {
      return it.ID === item.parentID;
    })[0];

    if(parentItem != null) {
      return getSortKey(parentItem)  + '' + item.ID;
    }

    return item.parentID + '' + item.ID;
  }
  
  return sortKeys[item.ID];
}

// generate sort keys for sorting items based on hierarchy
arr.forEach(function(item) {
  sortKeys[item.ID] = getSortKey(item);
});

// sort the array
arr.sort(function(item1, item2) {    
  var item1SortKey = sortKeys[item1.ID],
      item2SortKey = sortKeys[item2.ID];
  
  return item1SortKey < item2SortKey ?
    -1 :
    (item1SortKey > item2SortKey ?
      1:
      0);
});

document.getElementById('result').innerHTML = JSON.stringify(arr, null, 2);

<pre id="result"></pre>

Answer 3

Answer №2

To achieve this, you can utilize a filter function in your code implementation.

In the following example, I have made the data more straightforward by replacing the ParentID with the actual name of the parent. (You may use a custom function to handle this conversion while maintaining the same concept)

Sample Data:

$scope.data = [{ "ID": 1, "parentID":"Parent #1", name: "Parent #1" }, 
            { "ID": 2, "parentID": "Parent #1", name: "Parent #2" }, 
            { "ID": 3, "parentID": "Parent #2", name: "Child #1 1" }, 
            { "ID": 4, "parentID": "Parent #3", name: "child #1 2" },
            { "ID": 5, "parentID": "Parent #3", name: "child #2 1" },
            { "ID": 6, "parentID": "Parent #6", name: "child #2 2" }]

View:

<select ng-model="data"
        ng-options="d as d.name group by d.parentID for d in data | filter:checkParent(d)"></select>

Note that we introduced a custom function call within the filtering process. Below is an example of how this function can be defined in the controller:

$scope.checkParent = function () {
    return function (d) {
        return d.name != d.parentID;
    }
}

Upon applying this logic, the output will resemble the following image:

https://i.sstatic.net/r19tD.png

For your specific scenario, consider integrating your custom function that fetches the parent name into the filter method, such as:

(While it may vary based on the functionality of your custom function, the core concept should remain coherent)

$scope.checkParent = function () {
    return function (d) {
        return d.name != $scope.getParentName(d.parentID, idx);
    }
}

Answer 4

To achieve this, you can utilize a filter function in your code implementation.

In the following example, I have made the data more straightforward by replacing the ParentID with the actual name of the parent. (You may use a custom function to handle this conversion while maintaining the same concept)

Sample Data:

$scope.data = [{ "ID": 1, "parentID":"Parent #1", name: "Parent #1" }, 
            { "ID": 2, "parentID": "Parent #1", name: "Parent #2" }, 
            { "ID": 3, "parentID": "Parent #2", name: "Child #1 1" }, 
            { "ID": 4, "parentID": "Parent #3", name: "child #1 2" },
            { "ID": 5, "parentID": "Parent #3", name: "child #2 1" },
            { "ID": 6, "parentID": "Parent #6", name: "child #2 2" }]

View:

<select ng-model="data"
        ng-options="d as d.name group by d.parentID for d in data | filter:checkParent(d)"></select>

Note that we introduced a custom function call within the filtering process. Below is an example of how this function can be defined in the controller:

$scope.checkParent = function () {
    return function (d) {
        return d.name != d.parentID;
    }
}

Upon applying this logic, the output will resemble the following image:

https://i.sstatic.net/r19tD.png

For your specific scenario, consider integrating your custom function that fetches the parent name into the filter method, such as:

(While it may vary based on the functionality of your custom function, the core concept should remain coherent)

$scope.checkParent = function () {
    return function (d) {
        return d.name != $scope.getParentName(d.parentID, idx);
    }
}

"Unleashing the Power of ngSelect: Organizing Options with Infinite Depth

Answer №1

Sorting Code:

Answer №2

Similar questions

Exploring JQuery and JavaScript for loop guide

Updating the status of a checkbox array within the reducer to reflect changes made in the user interface

Trying out an ajax request in React by clicking a button

Obtain a specific text value as a variable using Google Tag Manager

The pop-up orientation is not being adjusted according to my CSS when it changes

Tips for Adding or Deleting 2 Rows in a Table

Switch between divs using an update panel

What is the reason behind my page automatically scrolling to the bottom when it loads?

Tips for utilizing multiple filters in AngularJS's $filter function

Attempting to implement a b-table that can manage multiple arrays within an array

Display a JavaScript variable as an attribute within an HTML tag

The 'authorization' property is not available on the 'Request' object

The Strophe.muc plugin and backbone improper binding of callbacks

Vue.js encountered an unexpected strict mode reserved word error that was not caught

Error: Encountered an unexpected token within the node_modules/aws-iot-device-sdk/thing/index.js file

What is the best approach for testing async XMLHttpRequest callbacks using Jest?

Can global scope be injected into a class instantiated in ES6, also known as a singleton?

transferring photos using tinymce to the server

Steps for retrieving user information post authentication query:1. Begin by initiating the query to authenticate the

The removeClass method does not affect the class attribute when using $(this).attr('class'), but only when using $(this).attr('id')