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

Dynamically load npm modules in Webpack using variables for the require statement

Is there a way to retrieve the file path of the file that is imported using an alias in Vite (Vue3)?

Having trouble setting a value for a textbox in angularjs

Eliminate duplicate dropdown options in Angular 2 using a filter function

React-native - Dropdownpicker - Error: Unable to retrieve label for selected choice

Accessing the Angular scope and making modifications using Chrome browser

In the dragstart event handler, event.dataTransfer and event.originalEvent will consistently be null

What is the process for "dereferencing" an object?

What is the process of transforming a basic JavaScript function into a TypeScript function?

What is the best way to choose the unique identifier of an HTML element inside a for loop in a Django template?

The React-loadable alert indicated a discrepancy in the text content

The function iframe.scrollTo() is not effective for scrolling through Excel or PowerPoint documents on an iPad

Why does JSON remain unchanged when a value is explicitly assigned in Javascript

Obtain the URL link from Unsplash where the picture is sourced

The JSON node fails to return a value after inserting data through an ajax request

What is the best way to extract a value from a JSON object?

Is there a way to dynamically update the TargetControlID of an AutoCompleteExtender using client-side JavaScript?

Strange issue: the code appears to be running multiple times with just one click

Learn how to combine pie and bar charts using Highcharts. Discover how to efficiently load JSON data and understand the different ways

What steps can be taken to issue an alert when the table does not contain any records?