Angularjs: How do I ng-repeat through an array of objects with a field that is also an array?

Question

I have an array that looks like this:

0: {ID: null, 
 name: "test", 
 city: "Austin", 
 UserColors: [{color: "blue"},{hobby:"beach"} ... ]}
 }...

I am trying to ng-repeat through the initial array but once I try to loop through the list, i see nothing, heres the html/angular

      <tr ng-repeat="c in vm.people">
                        <td>{{c.name}}</td>
                        <td>{{c.city}}</td>   

                        <td ng-repeat="uc in c.UserColors">
                            <td>{{uc.color}}</td>
                        </td>

                    </tr>

I am not sure what is wrong, and I would appreciate your help, I thank you in advance.

list is an infortunate name for the loop variable. Pick something else — NiVeR
– NiVeR, Commented Jun 5, 2018 at 19:42
'list' is just a random variable i used to post in this example @NiVeR — JamesDeveloper
– JamesDeveloper, Commented Jun 5, 2018 at 19:43
can you post a complete structure of your json, the outer one doesn't seem an array — NiVeR
– NiVeR, Commented Jun 5, 2018 at 19:46
Possible duplicate of ng-repeat in nested array in AngularJS — Juan
– Juan, Commented Jun 5, 2018 at 19:47
1. Try to omit a td inside a td. 2. Your UserColors array seems to have only one object with a color property, the other one is hobby - so you will get undefined there — baao
– baao, Commented Jun 5, 2018 at 19:47

georgeawg · Accepted Answer · 2018-06-05 23:18:19Z

I would process the field with a custom filter:

<td ng-repeat-start="(key, value) in c.UserColors  | reduce">
      <b>{{key}}</b>
</td>
<td ng-repeat-end>
      {{value}}
</td>

The filter:

app.filter("reduce",function() {
  return function(items) {
    var x = items.map(o => Object.entries(o));
    var x2 = x.reduce(((a,x) => (a.concat(x))), []);
    var x3 = x2.reduce(((o,x) => (o[x[0]]=x[1],o)), {});
    return x3;
  }
})

The DEMO

angular.module("app",[])
.controller("ctrl",function(){
  var vm = this;
  vm.people = {
    0: {ID: null, 
        name: "test", 
        city: "Austin", 
         UserColors: [{color: "blue"},{hobby:"beach"}]
      },
    1: {ID: null, 
        name: "best", 
        city: "Boston", 
         UserColors: [{colorx: "red"},{shirt:"black"}]
      },
    2: {ID: null, 
        name: "rest", 
        city: "Paris", 
         UserColors: [{colory: "yel"},{fruit:"peach"}]
      },
  }
})
.filter("reduce",function() {
  return function(items) {
    var x = items.map(o => Object.entries(o));
    var x2 = x.reduce(((a,x) => (a.concat(x))), []);
    var x3 = x2.reduce(((o,x) => (o[x[0]]=x[1],o)), {});
    return x3;//items;
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl as vm">
    <h3>Table</h3>
    <table>
      <tr ng-repeat="c in vm.people">
        <td>{{c.name}}</td>
        <td>{{c.city}}</td>   

        <td ng-repeat-start="(key, value) in c.UserColors  | reduce">
              <b>{{key}}</b>
        </td>
        <td ng-repeat-end>
              {{value}}
        </td>
        
      </tr>
    </table>
  </body>

Collectives™ on Stack Overflow

Angularjs: How do I ng-repeat through an array of objects with a field that is also an array?

1 Answer 1

The DEMO

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related