Nested objects/arrays with ng-repeat on Service Portal

[nerz]

Due to how we're handling data organization, I'm ending up with keyed objects with nested arrays underneath them. After that, we're trying to push that to a table. Example:

Server-side:

data.element = {};

data.element[key1] = [];

data.element[key1][0] = {

  name: "Plans",

  id: "123"

  };

data.element['key1'][1] = {

  name: "Location",

  id: "234"

  };

data.element[key2] = [];

data.element[key2][0] = {

  name: "Area",

  id: "345"

  };

data.element[key2][1] = {

  name: "Keystone",

  id: "234"

  };

Every key in the data.element object needs its own table, and then a row for each array element has to be created. Right now I'm working on getting the directives to work correctly, but this is all I have so far with no success:

HTML:

<table ng-repeat="element in c.data.element track by $index" >

          <tr ng-repeat="items in c.data.element">

              <td><ng-attr-id="{{item.parentName }}">{{item.name}}</td>

          </tr>

</table>

I know the ng-repeats aren't set up correctly but I'm not sure if they're designed to handle something like this.

[ChrisBurks · Accepted solution]

Hi nerz,

Actually there is one slight gotcha in your ng-repeat setup. The nested ng-repeat needs to start with the variable created from its parent. In your example the nested ng-repeat is using the same top level starting point c.data.element. It should start with just element.

First ng-repeat:

            ng-repeat = "element in c.data.element"

Second ng-repeat should be:

            ng-repeat= "items in element"

Also after the nested ng-repeat your script is calling item.name but the ng-repeat has items. Thus when calling the variable it should match as items.name

And from your example there is item.parentName but there is no property within your server script object that has "parentName" as a property name.

I hope that helps.

[nerz]

Thanks for the response Chris! Appreciated.