Using AngularJS to iterate over an array with a string index using ng-repeat

Question

Using AngularJS to iterate over an array with a string index using ng-repeat

Is it possible to use ng-repeat to iterate over an array with a string index? Review the sample code snippet below:

The following code is within a controller.

$scope.days = ["mon", "tue", "wed" .... "sun"];
$scope.arr = [];
$scope.arr["mon"] = ["apple","orange"];
$scope.arr["tue"] = ["blue","swish"];
.
.
.
$scope.arr["sun"] = ["pineapple","myfruit","carrot"];

Question - Is there a way to achieve something similar to the following using ng-repeat?

<div ng-repeat="day in days">{{day}}
    <span ng-repeat="item in arr(day)">{{item}}</span> 
    <-- Can we use "arr(day)" like this in Angular -->
</div>

javascript arrays angularjs associative-array angularjs-ng-repeat

Answer 1

Answer №1

To display items in an array, you can simply use the normal syntax. Take a look at my example on JSFiddle

<div ng-app='app' ng-controller='default' ng-init='init()'>
  <div ng-repeat='day in days'>
    <strong>{{day}}</strong><br/>
    <span ng-repeat="item in arr[day]">{{item}} </span> 
  </div>
</div>

Check out the demo here

Answer 2

To display items in an array, you can simply use the normal syntax. Take a look at my example on JSFiddle

<div ng-app='app' ng-controller='default' ng-init='init()'>
  <div ng-repeat='day in days'>
    <strong>{{day}}</strong><br/>
    <span ng-repeat="item in arr[day]">{{item}} </span> 
  </div>
</div>

Check out the demo here

Answer 3

Answer №2

To retrieve data from objects or arrays, remember to use square brackets.

<div ng-repeat="month in months">{{month}}
    <span ng-repeat="element in array[month]">{{element}}</span>
</div>

Answer 4

To retrieve data from objects or arrays, remember to use square brackets.

<div ng-repeat="month in months">{{month}}
    <span ng-repeat="element in array[month]">{{element}}</span>
</div>

Answer 5

Answer №3

This code snippet demonstrates how to utilize the ng-repeat directive in AngularJS: ng-repeat="item in arr[day]"

Answer 6

This code snippet demonstrates how to utilize the ng-repeat directive in AngularJS: ng-repeat="item in arr[day]"

Answer 7

Answer №4

Don't forget to include the item number in your printout.

<div ng-repeat="date in dates">
    {{date}}
    <div ng-repeat="(id, name) in itemList[date]">Item #:{{id + 1}} - {{name}}
    </div>
    <br />
</div>

Answer 8

Don't forget to include the item number in your printout.

<div ng-repeat="date in dates">
    {{date}}
    <div ng-repeat="(id, name) in itemList[date]">Item #:{{id + 1}} - {{name}}
    </div>
    <br />
</div>

Answer 9

Answer №5

Absolutely, achieving this is completely feasible. Take a look at the successful demonstration provided below:

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

app.controller("FooController", function($scope) {
  $scope.days = ["mon", "tue", "wed", "sun"];
  $scope.arr = [];
  $scope.arr["mon"] = ["apple", "orange"];
  $scope.arr["tue"] = ["blue", "swish"];
  $scope.arr["sun"] = ["pineapple", "myfruit", "carrot"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooController">
  <ol>
    <li ng-repeat="day in days">
      <strong>{{day}}</strong>
      <ol>
        <li ng-repeat="item in arr[day]">{{item}}</li>
      </ol>
    </li>
  </ol>
</div>

Answer 10

Absolutely, achieving this is completely feasible. Take a look at the successful demonstration provided below:

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

app.controller("FooController", function($scope) {
  $scope.days = ["mon", "tue", "wed", "sun"];
  $scope.arr = [];
  $scope.arr["mon"] = ["apple", "orange"];
  $scope.arr["tue"] = ["blue", "swish"];
  $scope.arr["sun"] = ["pineapple", "myfruit", "carrot"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooController">
  <ol>
    <li ng-repeat="day in days">
      <strong>{{day}}</strong>
      <ol>
        <li ng-repeat="item in arr[day]">{{item}}</li>
      </ol>
    </li>
  </ol>
</div>

Using AngularJS to iterate over an array with a string index using ng-repeat

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Condition has been fulfilled for both ngShow and ngHide

Substitute dynamic Angular expressions with fixed values within a string

How do I choose the specific financial date of April 1st in the datepicker selection?

Using React to Retrieve Array Data from an API and Implementing Filtering

Sorting with conditions in aggregations

How to create expandable nodes with lazy-loaded children in Dynatree?

Ensure the accordion design is adaptable to various screen sizes and orientations, as it is currently only allowing

Eliminate event listener using unique identifier

Splitting the webpage into two sections with individual scroll bars

Issue with importing Typescript and Jquery - $ function not recognized

I am uncertain about how to interpret this method signature

Disabling caching for Angular AJAX requests in Internet Explorer - a step-by-step guide

AssertionError [ERR_ASSERTION]: The value of undefined is not equal to 390 in the GitLab

The React render function fails to display the components it is supposed to render

Using soapUI to extract information from a JSON Response with arrays

What is the storage location for constant arrays in a compiler?

Ensuring website responsiveness beyond just the carousel

The error message indicates that xxx does not function as a constructor

Ways to bring in a Typescript Vue project to a Javascript Vue

What is the method to set precise values on a range slider?