Creating a nested list in AngularJS using the ng-repeat directive

Question

Creating a nested list in AngularJS using the ng-repeat directive

My experience with AngularJS is limited, but I am tasked with modifying a web app that requires nesting lists inside each other:

<ul class="first-level">
  <li ng-repeat="item in list">{{item.parentNo1}}
     <ul class="level-2">
       <li ng-repat="item in list">{{item.childOfCurrentParent}}</li>
       . . .
     </ul>
  </li>

  <li ng-repeat="item in list">{{item.parentNo2}}
     <ul class="level-2">
       <li ng-repat="item in list">{{item.childOfCurrentParent}}</li>
       . . .
     </ul>
  </li>
</ul>

A JSON array of objects was provided to me in the following format:

[{
    "id": 53,
    "nazwa": "Plafon Nekko",
    "foto": "01/01 _ Koma Nekko.jpg",
    "visible": 0,
    "cat_id": 1,
    "strona": 1,
    "styl": "nowoczesny",
    "rodzina": "Nekko",
    "kod": "O2177",
    "bookmark": true,
    "title": "nowoczesny Nekko",
    "page": 1,
    "image": "/lemir/www//gazetka/01/01 _ Koma Nekko.jpg",
    "width": 849,
    "height": 1201,
    "tags": "nowoczesny Koma O2180 Plafon Koma nowoczesny Koma O2181 Plafon Koma nowoczesny Koma O2182 Plafon Koma nowoczesny Koma O2183 Plafon Koma nowoczesny Koma O2184 Plafon Koma nowoczesny Koma O2185 Plafon Koma nowoczesny Koma O2186 Plafon Koma nowoczesny Koma O2187 Plafon Koma nowoczesny Nekko O...
},...]

I must arrange the parents at the first level and their children at the second level. A new parent should create another first-level li. Additionally, I need to link the style property (parent) with the name property (child).

Is there a way to make ng-repeat return to the first level when encountering a new parent value?

javascript angularjs json loops nested-lists

Answer 1

Answer №1

Although the question may be a bit dated, I believe I have found a great solution for handling nested lists. In my opinion, it provides a cleaner approach.

If you're interested in learning more about recursive templates in Angular, check out this blog post:

angularjs-recursive-templates

Check out the hierarchical list structure below:

[ 
{ 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },
      {
        title: 'Desktops'
      },
      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },
  {
    title: 'Printers'
  }
]

Take a look at the Angular sample provided:

<!-- recursive template -->
<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>
<!-- use -->
<ul>
     <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>

For a live demonstration, visit this JSFiddle link.

I hope this information proves helpful to some individuals.

Goodbye!

Answer 2

Although the question may be a bit dated, I believe I have found a great solution for handling nested lists. In my opinion, it provides a cleaner approach.

If you're interested in learning more about recursive templates in Angular, check out this blog post:

angularjs-recursive-templates

Check out the hierarchical list structure below:

[ 
{ 
    title: 'Computers',
    categories: [
      {
        title: 'Laptops',
        categories: [
          {
            title: 'Ultrabooks'
          },
          {
            title: 'Macbooks'            
          }
        ]
      },
      {
        title: 'Desktops'
      },
      {
        title: 'Tablets',
        categories: [
          { 
            title: 'Apple'
          },
          {
            title: 'Android'
          }
        ]        
      }
    ]
  },
  {
    title: 'Printers'
  }
]

Take a look at the Angular sample provided:

<!-- recursive template -->
<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>
<!-- use -->
<ul>
     <li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>

For a live demonstration, visit this JSFiddle link.

I hope this information proves helpful to some individuals.

Goodbye!

Answer 3

Answer №2

In order to improve the functionality, my recommendation is to handle this particular scenario within the model itself rather than on the frontend.

You have the option to create two customized functions that will return the model in the required format.

Subsequently, you can utilize these functions as shown below:

<ul ng-repeat="parent in fetchParents(data)">
    ...
    <ul ng-repeat="child in fetchChildren(data, parent)">
        ...

Alternatively, if you possess the ability to modify the Json structure, a more straightforward solution would be to alter it according to your specifications. You could transform it into an array of parents, each having an associated array of children.

This adjustment would simplify the process significantly, similar to the following example:

<ul ng-repeat="parentItem in data">
    ...
    <ul ng-repeat="childItem in parentItem.children">
        ...

Answer 4

In order to improve the functionality, my recommendation is to handle this particular scenario within the model itself rather than on the frontend.

You have the option to create two customized functions that will return the model in the required format.

Subsequently, you can utilize these functions as shown below:

<ul ng-repeat="parent in fetchParents(data)">
    ...
    <ul ng-repeat="child in fetchChildren(data, parent)">
        ...

Alternatively, if you possess the ability to modify the Json structure, a more straightforward solution would be to alter it according to your specifications. You could transform it into an array of parents, each having an associated array of children.

This adjustment would simplify the process significantly, similar to the following example:

<ul ng-repeat="parentItem in data">
    ...
    <ul ng-repeat="childItem in parentItem.children">
        ...

Answer 5

Answer №3

If you want to achieve something similar to this, consider adding an array of children to your JSON data and then iterating through it.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.list = [{
    "id": 53,
    "nazwa": "Plafon Nekko",
    "foto": "01/01 _ Koma Nekko.jpg",
    "visible": 0,
    "cat_id": 1,
    "strona": 1,
    "styl": "nowoczesny",
    "rodzina": "Nekko",
    "kod": "O2177",
    "children": [{
      "name": "xyz",
      "age": "15"
    }, {
      "name": "pqr",
      "age": "10"
    }],
    "tags": "nowoczesny Koma O2180"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="parent in list">{{parent.nazwa}}
      <ul>
        <li ng-repeat="child in parent.children">{{child.name }}</li>
      </ul>
    </li>
  </ul>
</div>

Answer 6

If you want to achieve something similar to this, consider adding an array of children to your JSON data and then iterating through it.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.list = [{
    "id": 53,
    "nazwa": "Plafon Nekko",
    "foto": "01/01 _ Koma Nekko.jpg",
    "visible": 0,
    "cat_id": 1,
    "strona": 1,
    "styl": "nowoczesny",
    "rodzina": "Nekko",
    "kod": "O2177",
    "children": [{
      "name": "xyz",
      "age": "15"
    }, {
      "name": "pqr",
      "age": "10"
    }],
    "tags": "nowoczesny Koma O2180"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="parent in list">{{parent.nazwa}}
      <ul>
        <li ng-repeat="child in parent.children">{{child.name }}</li>
      </ul>
    </li>
  </ul>
</div>

Creating a nested list in AngularJS using the ng-repeat directive

Answer №1

Answer №2

Answer №3

Similar questions

Prevent memory leakage by utilizing Angular's $interval feature in countdown processes

What could be the reason behind TypeScript ignoring a variable's data type?

Stop the interval once the route is altered in Angular 2

Select a random object from a document and dispatch it. A Discord bot

Tips for detecting the creation of an iframe before executing any javascript code

Transmitting an array to JSON in PHP

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

Display elements in an array of objects when the value changes with React

What's causing the show/hide feature to malfunction within the for loop in Vue.js?

Displaying divs depending on dropdown selection - Troubleshooting script issue

Tips for positioning D3 circles along a half-circle arc

Storing POST Request Data in Express

Creating hierarchical tables in PostgreSQL

The text/font-weight of the header button is mysteriously shifting without warning

Setting the locale in an extended datapipe in Angular 4: A step-by-step guide

Is there a browser-friendly alternative to `fs.readFileSync` function?

Manipulate the DOM elements within the ng-repeat directive

Why is the Express validator failing to work with the posted value?

Using JavaScript in Ext JS 4, transform a JSON object into a different JSON object

Utilize jq to extract data from json output