How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Question

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Here is the structure of an array I am working with:

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

I am currently attempting to ng-repeat over this initial array in my code. However, when I try to iterate through the list, nothing is displayed. Below is the relevant HTML and AngularJS snippet:

      <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 unable to pinpoint the issue, so any assistance you can provide would be greatly appreciated. Thank you in advance for your help.

javascript arrays angularjs angularjs-ng-repeat

Answer 1

Answer №1

I have developed a custom filter to process the field data:

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

The custom filter function is defined as follows:

app.filter("transform",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;
  }
})

Check out 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("transform",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>Displaying Table Data</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  | transform">
              <b>{{key}}</b>
        </td>
        <td ng-repeat-end>
              {{value}}
        </td>
        
      </tr>
    </table>
  </body>

Answer 2

I have developed a custom filter to process the field data:

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

The custom filter function is defined as follows:

app.filter("transform",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;
  }
})

Check out 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("transform",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>Displaying Table Data</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  | transform">
              <b>{{key}}</b>
        </td>
        <td ng-repeat-end>
              {{value}}
        </td>
        
      </tr>
    </table>
  </body>

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Answer №1

Check out the DEMO

Similar questions

Node.js QuickStart guide for authenticating with the Youtube API encounters error

Continuous loop of Vue countdown timer

How to enhance a class in JavaScript by adding a dynamic property

Passing data as a parameter to a page in React using history push

How to use jQuery to hide list items after a certain threshold

What is the method for obtaining an element with a class name that does not match a specific value?

What is the most effective method for applying numerous textures or images to a single Sphere in three.js?

Bidirectional Communication between ExpressJS and Mongoose Models

I am struggling to send an email using PHP mailer with POST data

Adjusting the height of the Tinymce Editor in React Grid Layout after the initial initialization

Column Arrangements in a Table

The retrieved item has not been linked to the React state

Python: Troubles with saving text

Navigating a JSON array using the Handlebars template engine

Adding content to a text field and then moving to the next line

Tips for integrating Angular 2 with different websites and modules while utilizing PHP as the backend

I am looking to implement the ajax data variable for use in a submit button. How should

I am looking to download a file from a server and showcase it in a browser using React.js. The file will be received as a response from the

Determine the number of elements located inside a designated slot

Unable to save the current light/dark mode preference to local storage