How to iterate through an array in Angular?

Question

I'm new to Angular. What I want to do is display data from an array of objects on the page and provide buttons for the user to move on the next/previous array item.

Let's say our array is:

var destinations = [
    {
      name: "Rome",
      weather: "sunny",
      price: "$2999"
    },
    {
      name: "Paris",
      weather: "cloudy",
      price: "$4500"
    }
];

If I want to display it in HTML, I can write {{destinations[1].name}} and it works, but how do I make this dynamic? I tried defining an i variable in the controller and inserting [i] into the HTML directive, but that doesn't work.

How can I make this work?

most tutorials will show you how to use ng-repeat. Should really do more research before asking here — charlietfl
– charlietfl, Commented May 14, 2016 at 17:16
It's a fine question. Sometimes you don't even know what to search on to find ng-repeat. — Scottie
– Scottie, Commented May 14, 2016 at 17:18
Whoa I just realized your question has nothing to do with repeating... updating my answer — doug65536
– doug65536, Commented May 15, 2016 at 3:08
Great, thank you @doug65536! I knew about ng-repeat, but didn't use it since I only wanted one instance displayed at a time. — DTX
– DTX, Commented May 15, 2016 at 18:51

jeremy-denis · Accepted Answer · 2016-05-14 17:13:37Z

2

in you html use ng-repeat

<div ng-repeat="destination in destinations">{{destination}}</div>

or in a controller you can use

angular.forEach(destinations,function(value) {
//here value is equal to one elment of your array
alert(value);
);

answered May 14, 2016 at 17:13

jeremy-denis

6,8963 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

Use a member of the scope to represent the current item.

HTML

<div data-ng-app="exampleModule" data-ng-controller="exampleController">
  <div>
    <button data-ng-click="changeDestination(1)">
      Next
    </button>
    <button data-ng-click="changeDestination(-1)">
      Prev
    </button>
  </div>
  <div class="dest-container">
    <div class="dest-field dest-price-field">  
      <div class="dest-title">Price:</div>
      <div class="dest-content">{{ current.price }}</div>
    </div>
    <div class="dest-field dest-name-field">  
      <div class="dest-title">Name:</div>
      <div class="dest-content">{{ current.name }}</div>
    </div>

    <div class="dest-field dest-weather-field">  
      <div class="dest-title">Weather:</div>
      <div class="dest-content">{{ current.weather }}</div>
    </div>
  </div>
</div>

This will create a one display, displaying $scope.current.

I have created a minimal complete example with your destination array.

Javascript

(function(angular) {
  "use strict";

  var exampleModule = angular.module('exampleModule', []);
  exampleModule.controller('exampleController', ['$scope', function($scope) {
    $scope.destinations = [
      {
        name: "Rome",
        weather: "sunny",
        price: "$2999"
      },
      {
        name: "Paris",
        weather: "cloudy",
        price: "$4500"
      }
    ];

    $scope.currentItem = 0;
    $scope.current = $scope.destinations[$scope.currentItem];

    $scope.changeDestination = function(diff) {
      $scope.currentItem += diff;

      if ($scope.destinations.length) {
        while ($scope.currentItem >= $scope.destinations.length)
          $scope.currentItem -= $scope.destinations.length;
        while ($scope.currentItem < 0)
          $scope.currentItem += $scope.destinations.length;
      } else {
        $scope.currentItem = 0;
      }
      $scope.current = $scope.destinations[$scope.currentItem];
    };
  }]);
}(angular));

The page loads AngularJS 1.4.8 before running the javascript code.

The same thing can be used for a range of items, you can slice the array and set an array in $scope.current then use ng-repeat to show the items to implement pagination.

user6334865 · Accepted Answer · 2016-05-14 17:16:12Z

1

 <div ng-repeat="value in destinations">
       <p>
       <span>{{value.name}}</span>
       <span>{{value.weather}}</span>
       <span>{{value.price}}</span>
       </p>
 </div>

answered May 14, 2016 at 17:16

user6334865

Comments

Rune Jørgensen · Accepted Answer · 2016-05-14 17:13:26Z

-1

<div ng-repeat="dest in destinations">
{{name}}
</div>

Would be one way, remember destinations must be part of the scope of your controller

answered May 14, 2016 at 17:13

Rune Jørgensen

11 bronze badge

1 Comment

Scottie Over a year ago

{{name}} won't work here... you'd need {{dest.name}}.

Collectives™ on Stack Overflow

How to iterate through an array in Angular?

4 Answers 4

Comments

HTML

Javascript

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

HTML

Javascript

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related