Rendering tree data in Angular JS by level is a great way to organize and

Question

Rendering tree data in Angular JS by level is a great way to organize and

Being new to AngularJS, I find the task of grouping data by tree level and tree id quite challenging. I would appreciate some assistance or guidance on this. What I aim to accomplish is grouping the data in a tree-like structure based on their level and id.

Here is my current HTML code:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
      <ul>
          <li ng-repeat="item in list">
              [[ item.code ]]

          </li>
      </ul>
  </div>

</body>

</html>

And here is my JavaScript code:

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

app.controller('myCtrl', function($scope) {

    $scope.list = [
        {
            "id": 1,
            "code": "TANK",
            "tree_id": 1,
            "level": 0,
            "parent": null
        },
        {
            "id": 2,
            "code": "OIL",
            "tree_id": 1,
            "level": 1,
            "parent": 1
        },
        {
            "id": 3,
            "code": "CHEM",
            "tree_id": 1,
            "level": 1,
            "parent": 1
        },
        {
            "id": 6,
            "code": "PROD",
            "tree_id": 1,
            "level": 2,
            "parent": 3
        },
        {
            "id": 4,
            "code": "BULK",
            "tree_id": 2,
            "level": 0,
            "parent": null
        },
        {
            "id": 5,
            "code": "LOG",
            "tree_id": 2,
            "level": 1,
            "parent": 4
        }
    ],
});

Upon reviewing the $scope.list, you will notice the tree_id, level, and parent values. My goal is to group the objects by tree id, where the top level (level 0) will be the visible section and the lower levels (level 1 and up) will be collapsible content. The tree id acts as a grouping mechanism, the level determines the hierarchy, and the parent integer value defines the root of the hierarchy. It's important to note that this structure can have multiple branches and be flexible and unlimited in its depth.

The desired visual representation should resemble the following:

TANK
- CHEM
- OIL
  - PROD
BULK
- LOG

javascript angularjs tree

Answer 1

Answer №1

This topic has been addressed on StackOverflow. For more information, you can refer to the following link:

How can I group data with an Angular filter?

By utilizing the groupBy filter, you can create a tree structure.

Answer 2

This topic has been addressed on StackOverflow. For more information, you can refer to the following link:

How can I group data with an Angular filter?

By utilizing the groupBy filter, you can create a tree structure.

Answer 3

Answer №2

You also have the option to utilize custom directives for managing nested levels:

UPDATE to include properties réf in directives and adjust your new array structure

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

app.directive('collection', function () {
return {
restrict : "E",
replace : true,
        transclude: true,
scope : {
collection : '=',
list : '=',
coldisplay : '=',
colfrom : '=',
colto : '='
},
template : "<ul><member ng-repeat='member in collection track by $index' member='member' list='list' coldisplay='coldisplay' colfrom='colfrom' colto='colto'></member></ul>"
};
});

app.directive('member', function ($compile) {
return {
restrict : "E",
replace : true,
        transclude: true,
scope : {
member : '=',
list : '=',
coldisplay : '=',
colfrom : '=',
colto : '='
},
template : "<li>{{member[coldisplay]}}</li>",
link : function (scope, element, attrs) {
scope.children = [];
angular.forEach(scope.list, function (value, key) {
if (value[scope.colfrom] === scope.member[scope.colto]) {
this.push(value);
}
}, scope.children);

if (scope.children.length > 0) {
element.append("<collection collection='children' list='list' coldisplay='coldisplay' colfrom='colfrom' colto='colto'></collection>");
$compile(element.contents())(scope);
}
}
}
});

app.controller('myCtrl', function ($scope) {

$scope.list = [{
"id" : 1,
"code" : "TANK",
"tree_id" : 1,
"level" : 0,
"parent" : null
}, {
"id" : 2,
"code" : "OIL",
"tree_id" : 1,
"level" : 1,
"parent" : 1
}, {
"id" : 3,
"code" : "CHEM",
"tree_id" : 1,
"level" : 1,
"parent" : 1
}, {
"id" : 6,
"code" : "PROD",
"tree_id" : 1,
"level" : 2,
"parent" : 3
}, {
"id" : 4,
"code" : "BULK",
"tree_id" : 2,
"level" : 0,
"parent" : null
}
];

$scope.rootList = [];

angular.forEach($scope.list, function (value, key) {
if (value.parent == null) {
this.push(value);
}
}, $scope.rootList);

})

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
  <collection collection='rootList' list='list' coldisplay='"code"' colfrom='"parent"' colto='"id"'></collection>
  </div>
</body>
</html>

Inspired by

Answer 4

You also have the option to utilize custom directives for managing nested levels:

UPDATE to include properties réf in directives and adjust your new array structure

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

app.directive('collection', function () {
return {
restrict : "E",
replace : true,
        transclude: true,
scope : {
collection : '=',
list : '=',
coldisplay : '=',
colfrom : '=',
colto : '='
},
template : "<ul><member ng-repeat='member in collection track by $index' member='member' list='list' coldisplay='coldisplay' colfrom='colfrom' colto='colto'></member></ul>"
};
});

app.directive('member', function ($compile) {
return {
restrict : "E",
replace : true,
        transclude: true,
scope : {
member : '=',
list : '=',
coldisplay : '=',
colfrom : '=',
colto : '='
},
template : "<li>{{member[coldisplay]}}</li>",
link : function (scope, element, attrs) {
scope.children = [];
angular.forEach(scope.list, function (value, key) {
if (value[scope.colfrom] === scope.member[scope.colto]) {
this.push(value);
}
}, scope.children);

if (scope.children.length > 0) {
element.append("<collection collection='children' list='list' coldisplay='coldisplay' colfrom='colfrom' colto='colto'></collection>");
$compile(element.contents())(scope);
}
}
}
});

app.controller('myCtrl', function ($scope) {

$scope.list = [{
"id" : 1,
"code" : "TANK",
"tree_id" : 1,
"level" : 0,
"parent" : null
}, {
"id" : 2,
"code" : "OIL",
"tree_id" : 1,
"level" : 1,
"parent" : 1
}, {
"id" : 3,
"code" : "CHEM",
"tree_id" : 1,
"level" : 1,
"parent" : 1
}, {
"id" : 6,
"code" : "PROD",
"tree_id" : 1,
"level" : 2,
"parent" : 3
}, {
"id" : 4,
"code" : "BULK",
"tree_id" : 2,
"level" : 0,
"parent" : null
}
];

$scope.rootList = [];

angular.forEach($scope.list, function (value, key) {
if (value.parent == null) {
this.push(value);
}
}, $scope.rootList);

})

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
  <collection collection='rootList' list='list' coldisplay='"code"' colfrom='"parent"' colto='"id"'></collection>
  </div>
</body>
</html>

Inspired by

Answer 5

Answer №3

In Angular, the groupBy function works for objects and not arrays. Therefore, you will need to generate the desired functionality in your controller.

If you are interested, I can provide a step-by-step process for achieving the desired outcome.

Once you retrieve your list from the API in your controller, you can call a function to manipulate it.

$scope.newList = {parents:[],childs:[]};

var generateNav = function(parent) {
  $scope.newList.parents.push(parent);
  angular.forEach($scope.list, function(item) {
    if(item.tree_id === parent.tree_id) {
      $scope.newList.childs.push(item);
    }
  })
};

var generateNewList = function(list) {
  angular.forEach(list, function(item) {
    if(item.level === 0) {
      generateNav(item);
    }
    });
};

// Call this function after retrieving data from the API
generateNewList($scope.list);

In your HTML, use newList to display the data.

<ul>
  <li ng-repeat="item in newList.parents">
    {{ item.code }}
    <ul>
      <li ng-repeat="child in newList.childs" ng-if="child.tree_id === item.tree_id && item.id!==child.id">{{child.code}}</li>
    </ul>
  </li>
</ul>

For a demonstration, you can visit the PLUNKER DEMO LINK.

Answer 6

In Angular, the groupBy function works for objects and not arrays. Therefore, you will need to generate the desired functionality in your controller.

If you are interested, I can provide a step-by-step process for achieving the desired outcome.

Once you retrieve your list from the API in your controller, you can call a function to manipulate it.

$scope.newList = {parents:[],childs:[]};

var generateNav = function(parent) {
  $scope.newList.parents.push(parent);
  angular.forEach($scope.list, function(item) {
    if(item.tree_id === parent.tree_id) {
      $scope.newList.childs.push(item);
    }
  })
};

var generateNewList = function(list) {
  angular.forEach(list, function(item) {
    if(item.level === 0) {
      generateNav(item);
    }
    });
};

// Call this function after retrieving data from the API
generateNewList($scope.list);

In your HTML, use newList to display the data.

<ul>
  <li ng-repeat="item in newList.parents">
    {{ item.code }}
    <ul>
      <li ng-repeat="child in newList.childs" ng-if="child.tree_id === item.tree_id && item.id!==child.id">{{child.code}}</li>
    </ul>
  </li>
</ul>

For a demonstration, you can visit the PLUNKER DEMO LINK.

Answer 7

Answer №4

To address the issue at hand, I recommend implementing a few modifications. Firstly, given that the data is sourced from an API, it's crucial to adjust the format for a more coherent structure. Consider structuring it as follows:

[{
  id: 1,
  code: "TANK",
  tree_id: 1,
  parent: null,
  children: [{
    id: 3,
    code: "CHEM",
    tree_id: 1,
    parent: 1,
    children: [{
        id: 9,
        code: "PROD",
        tree_id: 1,
        parent: 3
    }]
  }, {
    id: 2,
    code: "OIL",
    tree_id: 1,
    parent: 1,
  }]
}, {
  id: 4,
  code: "BULK",
  tree_id: 2,
  parent: null,
  children: [{
    id: 5,
    code: "LOG",
    tree_id: 2,
    parent: 4,
  }]
}]

To achieve this, we need to define the following function:

var createObject = function(json) {
    return {
        id: json.id,
        code: json.code,
        tree_id: json.tree_id,
        parent: json.parent,
        children: []
    }
};

var processList = function(temporaryObj) {

    for (var i = 0; i < list.length; i++) {
        if (list[i].parent === temporaryObj.id) {
            temporaryObj.children.push(processList(createObject(list[i])));
        }
    }

    return temporaryObj;
};

var convertList = function(list) {

    var temp = [];
    for (var i = 0; i < list.length; i++) {

        if (list[i].level === 0) {
            temp.push(processList(createObject(list[i])));
        }

    }

    return temp;
};

var newList = convertList(list_from_api);

Subsequently, it's essential to develop a recursive directive to display the content on the UI:

app.directive("tree", ['$compile', '$templateCache', function($compile, $templateCache) {
  return {
    type: "E",
    scope: {
      list: "="
    },
    link: function(scope, element, attrs) {
      element.replaceWith( $compile( $templateCache.get('tree.html'))(scope));
    }
  }
}]);

The corresponding tree.html template file should look like this:

<ul ng-if="list.length > 0">
   <li ng-repeat="item in list">
      <span>{{ item.code }}</span>
      <tree list="item.children"></tree>
   </li>
</ul>

For further insights, you can check out this plunkr link: https://plnkr.co/edit/8TtgFfgUQd73Du47b7XB?p=preview

Answer 8

To address the issue at hand, I recommend implementing a few modifications. Firstly, given that the data is sourced from an API, it's crucial to adjust the format for a more coherent structure. Consider structuring it as follows:

[{
  id: 1,
  code: "TANK",
  tree_id: 1,
  parent: null,
  children: [{
    id: 3,
    code: "CHEM",
    tree_id: 1,
    parent: 1,
    children: [{
        id: 9,
        code: "PROD",
        tree_id: 1,
        parent: 3
    }]
  }, {
    id: 2,
    code: "OIL",
    tree_id: 1,
    parent: 1,
  }]
}, {
  id: 4,
  code: "BULK",
  tree_id: 2,
  parent: null,
  children: [{
    id: 5,
    code: "LOG",
    tree_id: 2,
    parent: 4,
  }]
}]

To achieve this, we need to define the following function:

var createObject = function(json) {
    return {
        id: json.id,
        code: json.code,
        tree_id: json.tree_id,
        parent: json.parent,
        children: []
    }
};

var processList = function(temporaryObj) {

    for (var i = 0; i < list.length; i++) {
        if (list[i].parent === temporaryObj.id) {
            temporaryObj.children.push(processList(createObject(list[i])));
        }
    }

    return temporaryObj;
};

var convertList = function(list) {

    var temp = [];
    for (var i = 0; i < list.length; i++) {

        if (list[i].level === 0) {
            temp.push(processList(createObject(list[i])));
        }

    }

    return temp;
};

var newList = convertList(list_from_api);

Subsequently, it's essential to develop a recursive directive to display the content on the UI:

app.directive("tree", ['$compile', '$templateCache', function($compile, $templateCache) {
  return {
    type: "E",
    scope: {
      list: "="
    },
    link: function(scope, element, attrs) {
      element.replaceWith( $compile( $templateCache.get('tree.html'))(scope));
    }
  }
}]);

The corresponding tree.html template file should look like this:

<ul ng-if="list.length > 0">
   <li ng-repeat="item in list">
      <span>{{ item.code }}</span>
      <tree list="item.children"></tree>
   </li>
</ul>

For further insights, you can check out this plunkr link: https://plnkr.co/edit/8TtgFfgUQd73Du47b7XB?p=preview

Rendering tree data in Angular JS by level is a great way to organize and

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Demonstrate a array of values at varying angles within a circle using the functionalities of HTML5 canvas

Include form data into an array of objects within an Angular data source

How to show the current week using React Native

A Vue computed property is returning the entire function instead of the expected value

How can I pass arguments from a Python command line program (compiled to an EXE) to a JavaScript file?

Creating an object in AngularJS by merging data from three separate API calls

Tips for capturing a screenshot of the ESRI Map using Angular

Angular's observable function is not providing a complete response

Refresh the page to change the section using vue.js

The function Router.use is looking for a middleware function, but instead received an object in node.js /

Material UI - Radio buttons do not properly reflect the current state of the value

Determining the Location of a Drag and Drop Item

Module is absent in JavaScript but present in TypeScript

The callback functions, such as afterMove, are not being executed

Tips for avoiding $state refresh in Components unaffected by changes to $state.var?

Error occurring when attempting to pass messages within an iframe on a sandboxed page in a Chrome extension

Adjust the color of the active link on the page using Angular and CSS

Tips for creating a functional null option using the select ng-options feature

How can I pass a variable name as an argument in Vue?

Obtain the string value for the template variable