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'">

Probably it should be <tr data-ng-repeat="i in item.results | orderBy:'insItem.pr'"> — ema
– ema, Commented Jan 13, 2016 at 18:38
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
– jhon dano, Commented Jan 13, 2016 at 18:55
you should do this - <tr data-ng-repeat="(key, val) in item.results"> and then try {{val.model}} — Ruben Karapetyan
– Ruben Karapetyan, Commented Jan 13, 2016 at 19:05
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. jsonlint.com — jyrkim
– jyrkim, Commented Jan 13, 2016 at 20:27

bri · Accepted Answer · 2016-01-13 19:19:16Z

3

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.

answered Jan 13, 2016 at 19:19

bri

3,04018 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jhon dano Over a year ago

thanks can you tell me how i can convert the whole object into an array?

bri Over a year ago

Wait ... which object are we talking about? "items" or "item" or "result"?

jhon dano Over a year ago

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!

bri Over a year ago

Got it now ... Will edit shortly to provide that option.

ema · Accepted Answer · 2016-01-13 19:14:10Z

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, 2016 at 19:14

ema

5,7931 gold badge28 silver badges32 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:28:22Z

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

Collectives™ on Stack Overflow

ng repeat array in array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related