Best Practices for Iterating over Nested Objects and Arrays Using ng-repeat

I've been trying to use Angular's ng-repeat, but nothing seems to work for me. I'm attempting to loop through companies.users and display all the first names. Any assistance would be greatly appreciated! Thank you!

<div ng-app="app" ng-controller="appCtrl">
<div ng-repeat="user in companies.users">
<p>{{user.firstName}}</p>
<div>
app.controller('appCtrl', function($scope){
    $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
            firstName: 'Alex',
            lastName: 'D',
            number: 1234
        }, {
            firstName: 'Sarah',
            lastName: 't',
            number: 14
        }, {
            firstName: 'J',
            lastName: 'd',
            number: 07
        }]
    }, {
        name: 'The Best Company Elegant',
        users: [{
            firstName: 'Alx',
            lastName: 'B',
            number: 1234
        }, {
            firstName: 'Seth',
            lastName: 'w',
            number: 12
        }, {
            firstName: 'J.S',
            lastName: 'B',
            number: 7
        }]
    }, {
        name: 'The Best Company by Julia',
        users: [{
            firstName: 'Aleddddx',
            lastName: 'l',
            number: 1234
        }, {
            firstName: 'Maggy',
            lastName: 'n',
            number: 1
        }, {
            firstName: 'Ja',
            lastName: 'Key',
            number: 123
        }]
    }]
});

Answer №1

If you want to display nested data in AngularJS, you can use a nested ng-repeat.

<div ng-repeat="company in companies">
  <div ng-repeat="user in company.users">
    <p>{{user.firstName}}</p>
  </div>
<div>

Here is an example:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.companies = [{
      name: 'The Best Company Denim',
      users: [{
        firstName: 'Alex',
        lastName: 'D',
        number: 1234
      }, {
        firstName: 'Sarah',
        lastName: 't',
        number: 14
      }, {
        firstName: 'J',
        lastName: 'd',
        number: 07
      }]
    }, {
      name: 'The Best Company Elegant',
      users: [{
        firstName: 'Alx',
        lastName: 'B',
        number: 1234
      }, {
        firstName: 'Seth',
        lastName: 'w',
        number: 12
      }, {
        firstName: 'J.S',
        lastName: 'B',
        number: 7
      }]
    }, {
      name: 'The Best Company by Julia',
      users: [{
        firstName: 'Aleddddx',
        lastName: 'l',
        number: 1234
      }, {
        firstName: 'Maggy',
        lastName: 'n',
        number: 1
      }, {
        firstName: 'Ja',
        lastName: 'Key',
        number: 123
      }]
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div ng-repeat="company in companies">
    <div ng-repeat="user in company.users">
      <p>{{user.firstName}}</p>
    </div>
  </div>
</div>

Answer №2

Do you prefer this format: https://codepen.io/sheriffderek/pen/944e812b0cd218f2a7990fad8bcafc5d/ ?

HTML Markup

<section ng-app="myApp" ng-controller="myCtrl">

    <ul class="company-list">
        <li class="company" ng-repeat="company in companies">
            {{company.name}}
            
            <ul class="person-list">
                <li class="person" ng-repeat="person in company.users">
                    {{person.firstName}}
                </li>
            </ul>
        </li>
    </ul>

</section>

JavaScript Scripts

var companiesArray = [
    {
        name: 'The Best Company Denim',
        users: [
            {
                firstName: 'Alex',
                lastName: 'D',
                number: 1234
            }, {
                firstName: 'Sarah',
                lastName: 't',
                number: 14
            }, {
                firstName: 'J',
                lastName: 'd',
                number: 07
            }
        ],
    }, {
      ...
    },
];

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.companies = companiesArray;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for extracting title and image from someone else's blog posts to share on your own website

Currently, I am in the process of creating a website where I can showcase my personally curated content. I have been struggling to figure out how to seamlessly integrate this content into my site without relying on an API. My initial idea was to manually ...

How can I retrieve the data returned by an ajax call using jQuery?

I have a function that is making an AJAX call to return data. Here is the code: function reqNodelistByField( i ) { $.ajax({ type: 'post', url: './req.nodelist.by.field.php', dataType: 'text', ...

Looking to query MongoDB and pass the data to Angular using Express

After completing the tutorial on www.clementinejs.com to learn the MEAN stack, I encountered challenges when working with mongoose to retrieve more data. Despite my understanding of most concepts, integrating mongoose and fetching additional data was probl ...

Utilizing an AngularJS factory to retrieve JSON data from the server

I have a large JSON object in my controller that I want to move to a separate file. Currently, this is how I'm approaching it: myApp.controller('smController', ['$scope', function($scope) { ... var stadtmobilRates = { cla ...

Tap the <li> element in a select2 dropdown from Bootstrap using internjs

I am currently encountering an issue while trying to select values from a Bootstrap-select2 drop-down in my form during the process of writing some function tests. If Select2 is unfamiliar to you, here are some examples that may help: The drop-downs are ...

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

Analyzing DynamoDB Query

I am on a mission to recursively analyze a DynamoDB request made using the dynamo.getItem method. However, it seems that I am unable to locate a similar method in the DynamoDB SDK for Node.js. You can find more information about DynamoDB SDK at http://do ...

Tips for setting a value from an AJAX-created element into a concealed form field

There is a div that contains a button. When the button is clicked, a form appears. The div's id is then assigned to a hidden field within the form. This functionality works for the divs that are present on the page when it initially loads, but it does ...

Efficiently finding a group of substrings within a JavaScript string

I am currently working on a method to efficiently search for specific substrings within a given string. Here is my current implementation: const apple = "apple" const banana = "banana" const chickoo = "chickoo" const dates = & ...

What could be the reason for the timeout function in my Angular application not working as expected?

I've created a basic controller to handle a countdown timer. Upon running the code, I notice that only one "tick" is displayed in the console. Ideally, I would like to see a "tick" every 5 milliseconds. .controller('Countdown', function($s ...

Concealing items by placing them strategically between the camera and certain objects in Three.js

At the moment, my project involves utilizing three.js with several objects in the scene. One of the key features I am working on is the ability to select an object and have all other objects between the camera and the selected one hidden or removed. I am ...

Using the OR condition in the ternary operator within ReactJS

Recently, I have started working on a ReactJS project focusing on menus. In this project, I have successfully implemented logic for the active menu feature. For instance, when a user is on page 2, the corresponding menu item will be highlighted as active. ...

How to change class names dynamically in Vue.js?

I am looking for a way to dynamically change the background color based on a review rating using Vue.js. Ideally, I would like to achieve this with the following code: <div class="review" :style="reviewColor(hotel.average)"> In my methods section, ...

Adjusting widths of strokes in React Native Vector Icons

I selected an icon from the react-native-vector-icon library. For instance, let's use featherIcons. How can I include a stroke-width property to the react-native-vector-icons package? import FeatherIcon from 'react-native-vector-icons/Feather&ap ...

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality w ...

Approach to dividing PHP output into multiple outputs (AJAX, PHP) (nested AJAX requests, AJAX inside AJAX loop?)

Seeking advice on how to efficiently handle PHP output in small chunks for AJAX responseText. The project involves a webpage using AJAX to input a last name, which is then processed by a PHP program. The PHP code randomly selects three people with differen ...

The fullCalendar plugin fails to display properly when placed within a tab created using Bootstrap

My current challenge involves integrating fullCalendar into a Bootstrap tab. It works perfectly when placed in the active tab (usually the first tab), however, when I move it to another tab that is not active, the calendar renders incorrectly upon page loa ...

Is there a way to access the data attribute value from one component in another component without relying on an event bus mechanism?

In the 'App.vue' component, there is a data attribute called 'auth' that indicates whether the user is logged in. If it is empty, the user is not logged in; if it contains 'loggedin', then the user is authenticated. Now, let& ...

Deactivate multiple input fields by utilizing various radio buttons

I need help with enabling and disabling input fields based on radio button selection. When the first radio button is selected, I want to disable three input fields, when the second is selected, only two specific input fields should be enabled (SHIFT START ...

Using Vue 3 to send formdata with axios

I've been attempting to upload images to a backend expressjs API using Vue 3. I'm creating a FormData object named "files" and sending it via axios to the server. However, the server isn't receiving anything (req.files is undefined). The ser ...