angular for loop returns last value

Question

I believe this is a pretty simple question and I have found some solutions here on forum but it looks that I did everything right but still getting only last value. I've wrote this simple example. Somebody could explain me, where is my mistake?

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Reinforcement';

                    $http.get('test.json')
                        .success(function (data) {
                            $scope.test = data;
                        });


      $scope.getName = function () {
            for (var i = 0; i < $scope.test.length; i++) {
               $scope.parent = $scope.test[i].name
            }
         }
});

html

   <div class="dropdown category" style="position:relative">
                                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                                <li ng-repeat="objName in test" ng-click="getName()">
                                                    <a href=""> {{objName.name}}</a>
                                                </li>
                                            </ul>
                                </div>

                                {{ parent }}

In your example the dropdown contains all of the elements listed in the json file. What is the problem you struggle with? — AndrasCsanyi
– AndrasCsanyi, Commented Apr 6, 2016 at 19:09
@SayusiAndo if you click on "Monopoly", it returns "World", this is my struggling — Anton
– Anton, Commented Apr 6, 2016 at 19:10

MacKentoch · Accepted Answer · 2016-04-07 03:41:48Z

2

Use ng-repeat $index to get name. Don't loop over your model, see it is more simple :

<p>Hello {{name}}!</p>

<div class="dropdown category" style="position:relative">
  <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li ng-repeat="objName in test" ng-click="getName($index)">
        <a href="">       {{objName.name}}</a>
     </li>
   </ul>
 </div>

{{ selectedCategory }}


var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
 $scope.name = 'Reinforcement';

 $http.get('test.json')
     .success(function (data) {
      $scope.test = data;
 });

 $scope.getName = function (index) {
   console.info($scope.test[index].name);
   $scope.selectedCategory = $scope.test[index].name;
 }
});

NOTE/advice : avoid using model name like parent since you could confuse with $parent which gives access to parent scope.

In your second case, you have to get parent $index with $parent.$index (since nested ng-reapeat) but it is the same trick = no loop over array model:

html:

<ul class="dropdown-menu">
        <li class="dropdown" ng-repeat="entity in entitis" >
            <a class="trigger right-caret">{{ entity }}</a>
            <ul ng-if="entity | filter : 'Main'" class="dropdown-menu sub-menu">
                <li ng-repeat="domain in ast" ng-click="getDomain($parent.$index, $index)">
                    <a href=""> {{domain.name}}</a>
                </li>
            </ul>
        </li>
    </ul>
 </div>    
 {{ items }}
 <br/>
 <br/>
 <p><b>parent index : {{astParentIndex}}</b></p>
 <p><b>index : {{astIndex}}</b></p>

js

  $scope.getDomain = function (parentIndex, index) {
    $scope.astParentIndex = parentIndex;
    $scope.astIndex = index;
    $scope.items = $scope.ast[parentIndex].children;
  }

edited Apr 7, 2016 at 3:41

answered Apr 6, 2016 at 19:10

MacKentoch

2,4663 gold badges16 silver badges19 bronze badges

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

7 Comments

Anton Over a year ago

thank for answer, so does index work even in nested arrays?

MacKentoch Over a year ago

$index is related to your ng-repeat that loops over an array model. So it would be easier to better answer your question with use-cases (since I'm not sure to offer a good answer). But another advice, when you need the first or the last item of an array model use better $first and $last. See angular website it is super well documented.

MacKentoch Over a year ago

Nested array suppose you use another ng-repeat inside ng-reapeat. I guess you talked about that?

Anton Over a year ago

right, so basically I'm trying to load child array in ibjecxt, and every time getting only last array, then I have found that for loop returns only last object and wasn't lucky so decided ask about it

MacKentoch Over a year ago

Please provide a piece of code I'm sure it will be fixed fast. I understand ng-repeat can be tricky at a first sight but it is simple when you understand the behind the scene. Keep on learning that is super nice and worth you will see

|

Abdullah Rasheed · Accepted Answer · 2016-04-06 19:32:34Z

1

You need to pass $index into your getName() method.

Your HTML

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <div class="dropdown category" style="position:relative">
    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li ng-repeat="objName in test track by $index" ng-click="getName($index)">
        <a href=""> {{objName.name}}</a>
      </li>
    </ul>
  </div>                                 
{{ bindedVariable}}
</body>

Your Controller

Then use the index of the selected object to get the correct value from the $scope.test array.

$scope.getName = function (index) {
  $scope.bindedVariable= $scope.test[index].name
}

edited Apr 6, 2016 at 19:32

answered Apr 6, 2016 at 19:10

Abdullah Rasheed

3,7524 gold badges35 silver badges51 bronze badges

1 Comment

MacKentoch Over a year ago

don't need to track by $index to use $index. track by just helps for performance.

user1231232141214124 · Accepted Answer · 2016-04-06 19:10:41Z

0

$scope.parent = $scope.test[i].name

This will overwrite $scope.parent every single time, thus it will only ever be the last value

answered Apr 6, 2016 at 19:10

user1231232141214124

1,3593 gold badges16 silver badges22 bronze badges

Comments

Sam Bauwens · Accepted Answer · 2016-04-06 19:12:45Z

You can pass you ng-repeat item as a parameter to getName (but I suggest you call it setName or selectName which would be more readable):

HTML

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

    <div class="dropdown category" style="position:relative">
                                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                                <li ng-repeat="objName in test" ng-click="getName(objName.name)">
                                                    <a href=""> {{objName.name}}</a>
                                                </li>
                                            </ul>
                                </div>

                                {{ parent }}
</body>

</html>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Reinforcement';

                    $http.get('test.json')
                        .success(function (data) {
                            $scope.test = data;
                        });


      $scope.getName = function (name) {
               $scope.parent = name;
         }
});

Plunker

http://plnkr.co/edit/p3PFmQHFmllcXEvL7K0z

J. Titus · Accepted Answer · 2016-04-06 19:13:16Z

0

Your for loop always sets $scope.parent to the last element. Try this:

HTML

<li ng-repeat="obj in test" ng-click="getName(obj)">
    <a href="">{{obj.name}}</a>
</li>

JS

$scope.getName = function(obj) {
    $scope.parent = obj.name;
}

answered Apr 6, 2016 at 19:13

J. Titus

9,7201 gold badge37 silver badges46 bronze badges

Collectives™ on Stack Overflow

angular for loop returns last value

5 Answers 5

7 Comments

1 Comment

Comments

HTML

JS

Plunker

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

1 Comment

Comments

HTML

JS

Plunker

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related