ng repeat array in array

Question

I am trying to repeat a child array of a multidimensional array with ng repeat in Angular. My json object is this:

 $scope.items =   [{    "id":1,
        "BasisA":"1",
        "Basis":true,
        "personSex":"m",
        "isCollapsed":false,
        "name":"Mark Polos",
        "age":"1955",
        "results":[{"1000":{"company_name":"***","model":"***","modelname":"***","pr":222,"rating":4.5,"priority":9,"matching":1},
                    "1001":{"company_name":"***","model":"***","modelname":"***","pr":228.7,"rating":5.7,"priority":7,"matching":2},
                    "1002":{"company_name":"***","model":"***","modelname":"***","pr":241.7,"rating":1.9,"priority":4,"matching":3}
                }]
    }]

Itried somthing like this:

... data-ng-repeat="item in items">

And then in the table of this child:

<tr data-ng-repeat="i in item | orderBy:'insItem.pr'">

that was a typo, sorry... however if i now do this in my ng-repeat {{i.model}} it stays empty... when i do this {{i}} t gives me all the rows though? — jhon dano, Jan 13 '16 at 18:55
when you test your code, then please remove the extra white-space in your json. For me the json was invalid at first. After I deleted some white space it was ok. http://jsonlint.com/ — jyrkim, Jan 13 '16 at 20:27

score 3 · Accepted Answer · answered Jan 13 '16 at 19:19

It doesn't look like that results property is actually an "array." If that's just a typo in your example, then disregard. If not ... read on.

It looks like an array with a single item, and that Item is a set of properties which are, in turn, objects. In other words, you would reference the property "pr" for the result named "1000" by with code that looks like item.results[0]["1000"].pr NOT with code that looks the way your ng-repeat is expecting(item.results[0].pr).

Can you transform your items when you get them so that results is a true array?

OR - can you use a function inside of your controller that returns the array you are looking for?

View Code:

<... data-ng-repeat="result in resultsFromItem(item)" >

Controller Code:

$scope.resultsFromItem = function (item) {

   if(item==undefined || item.results==undefined || item.results.length==0) {
      return [];
   }

   var myResults = [];
   for (var key in item.results[0]) {
      if(item.results[0].hasOwnProperty(key)) {
         myResults.push(item.results[0][key]);
      }
   }

   return myResults;

}

You might even decide to hang that "transformed" results object off each item object (so you only have to go through the transform one time) if you wanted to.

thanks can you tell me how i can convert the whole object into an array? — jhon dano, Jan 13 '16 at 19:33
Wait ... which object are we talking about? "items" or "item" or "result"? — bri, Jan 13 '16 at 20:20
It concerns the whole result... If i could convert the code to a proper array before usage that would make things more easier not? Then i dont have to always call that function to convert! — jhon dano, Jan 13 '16 at 20:33

score 1 · Answer 2 · answered Jan 13 '16 at 19:14

1

You should access to the results field:

... data-ng-repeat="item in items">

<tr data-ng-repeat="i in item.results">

Since the nested array is in the results property of the main object.

answered Jan 13 '16 at 19:14

ema

5,668
1
25
31

score 0 · Answer 3 · edited May 23 '17 at 10:28

I used three nested ng-repeat directives to get this rolling :-) The third ng-repeat uses ng-repeat="(key, value) in result" functionality to display all result object keys and values, which I got working with the help of this answer on how to iterate over keys and values in ng-repeat. The orderBy: part isn't yet working (if someone knows how to implement that then any help is welcomed).

    <ul>
      <li ng-repeat="item in items">
         id: {{item.id}}, name: {{item.name}}, age: {{item.age}}, results: 
         <table>
           <tr ng-repeat="result in item.results">
             <td>
               <table style="border: 1px solid black;">
                  <tr ng-repeat="(key, value) in result | orderBy: value.pr">
                    <td> {{key}} </td> <td> {{ value }} </td>
                  </tr>
              </table>
            </td>
          </table>
      </li>
    </ul>

Plunker

ng repeat array in array

3 Answers3