CODEWITHSUNDEEP
javascriptangularjsperformanceoptimizationdata-structures
Zacol
Zacol

Reputation: 93

Angular 1.5 and multiple nested data structure

I have got a nested structure which looks like this example:

let structure = [{
  section: '1',
  title: 'First lvl title',
  children: [{
    section: '1.1',
    title: 'Second lvl title',
    children: []
  }, {
    section: '1.2',
    title: 'Second lvl title',
    children: [{
      section: '1.2.1',
      title: 'Third lvl title',
      children: []
    }, {
      section: '1.2.2',
      title: 'Third lvl title',
      children: []
    }]
  }, {
    section: '1.3',
    title: 'Second lvl title',
    children: []
  }]
}, {
  section: '2',
  title: 'First lvl title',
  children: [{
    section: '2.1',
    title: 'Second lvl title',
    children: []
  }, {
    section: '2.2',
    title: 'Second lvl title',
    children: []
  }]
}, ...other objects]

As you can see, structure is similar to the table of contents - I have got objects which represents units and each unit has own section number, title and array with subsections.

Data characteristic is that I never know how many sections and how many nested subsections I have. I need to assume that I can get something around 2 000 objects (maybe more) with different configuration. Also, I cannot predict maximum nested level and it can be different for specific sections.

I am trying to find the most optimized way to represent this structure as HTML page. I am thinking about using ng-repeat but I don't know if it is a good idea since I don't know how many deep levels I will have. Also, after generating my HTML page, I can remove one section (for example section 1) and I need to recalculate section numbers for each other section and subsection (section 2 is now section 1, subsection 2.1 is now subsection 1.1, and so on). What is the best way to handle this operation on such a big amount of data?

Upvotes: 0

Views: 83

Answers (1)

isherwood
isherwood

Reputation: 61063

You'll want a recursive template, wherein it won't matter what the structure is nor how many levels deep the data go. You can use a recursive custom directive or recursive ngInclude: 

<script type="text/ng-template" id="categoryTree">
    {{ category.title }}
    <ul ng-if="category.categories">
        <li ng-repeat="category in category.categories" ng-include="'categoryTree'">           
        </li>
    </ul>
</script>

http://benfoster.io/blog/angularjs-recursive-templates

Upvotes: 1

Related Questions