Angular JS ng-repeat not working with Array of Objects

Question

I have a simple list

<ul>
    <li ng-repeat="spiel in spielListe">Do something</li>
</ul>

And a controller (which is perfectly connected)

$scope.spielListe = [];

In addition there is a larger method which pushes some objects to the array in this structure:

var spielObjekt = {team1: "Teamname 1", team2: "Teamname 2", court: ""};
$scope.spielListe.push(spielObjekt);

In the end the array looks like that:

The content of the objects does not really matter, as angular should execute the ng-repeat twice and just show my text twice - but the html page stays empty.

What am I doing wrong? Where could I do a mistake?

Update

There seems to be a problem with the .push. I put one Object with the same structure into my array which is recognized in the ng-repeat. But the 2 Objects that are pushed in later are not shown. Problem?

Update 2

Thank you for your help - the mistake was, that several elements in the DOM had ng-controller="contentCtrl" inside. Which means the controller got called several times and the objects refreshed - did not understand that

Could you add a JSFiddle or similar. The situation you describe seems correct and I can't recreate the error you described. jsfiddle.net/7MhLd/2312 — Giovani Vercauteren
– Giovani Vercauteren, Commented Dec 14, 2016 at 9:40
Have you specify the controller with ng-controller='YourController' in the body tag for instance ? — T.Gounelle
– T.Gounelle, Commented Dec 14, 2016 at 9:46
jsfiddle.net/4L9ys7g9 - I Agree it looks massive but the output is simple — mstoldt
– mstoldt, Commented Dec 14, 2016 at 9:52
Update: There seems to be a problem with the .push. I put one Object with the same structure into my array which is recognized in the ng-repeat. But the 2 Objects that are pushed in later are not shown. Problem? — mstoldt
– mstoldt, Commented Dec 14, 2016 at 10:12

Nitheesh · Accepted Answer · 2016-12-14 10:33:45Z

There are some lack of clarity in the data provided. From your question I think you are looking for one of the below cases

Case 1

If you are expecting your object as {team1: "Teamname 1", team2: "Teamname 2", court: ""}, this will print only one time in the output as this is a single object.

Here is the sample for the above situation..

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="spiel in spielListe">{{spiel.team1}}</li>
        </ul>
        <button ng-click="addItems()">Add</button>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl', function ($scope, $http) {
            $scope.spielListe = [];
            $scope.addItems = function () {

                var spielObjekt = {
                    team1: "Teamname 1",
                    team2: "Teamname 2",
                    court: ""
                };
                $scope.spielListe.push(spielObjekt);
            }
        });
    </script>

</body>

</html>

Case 2

But if you still want this three times at your output, you need to modify the JSON structure, like this

["Teamname 1", "Teamname 2", ""]

and ng-repeat as

<li ng-repeat="spiel in spielListe">{{spiel}}</li>

or JSON structure as

[{TeamName: "Teamname 1"}, {TeamName: "Teamname 2"}, {TeamName: ""}]

and ng-repeat as

<li ng-repeat="spiel in spielListe">{{spiel.TeamName}}</li>

because looping can be done only through an array of objects not through a single object. Here is the example of that implementation.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="spiel in spielListe">{{spiel}}</li>
        </ul>
        <button ng-click="addItems()">Add</button>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('MyCtrl', function ($scope, $http) {
            $scope.spielListe = [];
            $scope.addItems = function () {

                var spielObjekt = [
                    "Teamname 1", "Teamname 2", ""
                ];
                $scope.spielListe = $scope.spielListe.concat(spielObjekt);
            }
        });
    </script>

</body>

</html>

Raj · Accepted Answer · 2016-12-14 10:06:03Z

0

Your spielObjekt variable is just one object and you pushing one object to an array, so tour <li> should print just one time. So, spielObjekt variable like this..

var spielObjekt = [{team1: "Teamname 1"},{team2: "Teamname 2"},{court: ""}];

And you dont have use push,just set spielObjekt variable to $scope.spielListe .your <li> will print 3 times.

$scope.spielListe = [];
var spielObjekt = [{team1: "Teamname 1"},{team2: "Teamname 2"},{court: ""}];
$scope.spielListe = spielObjekt;

answered Dec 14, 2016 at 10:06

Raj

4911 gold badge8 silver badges28 bronze badges

2 Comments

mstoldt Over a year ago

You don't get the code, I probably explained it poorly. I have several objects of the same structure I need to push inside so it does make sense in my use

Viplock Over a year ago

that's not what he want , that is one single object , not different objects.

Rohìt Jíndal · Accepted Answer · 2016-12-14 20:15:15Z

Case 1 : You are passing single object in $scope.spielListe. Hence, ng-repeat iterate it only once.

Case 2 : If you having spielObjekt as array of objects then you have to iterate it to push both the objects in an $scope.spielListe array.

Working Demo :

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

myApp.controller('MyCtrl',function($scope) {
  $scope.spielListe = [];
  var spielObjekt = [
             {team1: "Teamname 1", team2: "Teamname 2", court: ""},
             {team3: "Teamname 3", team4: "Teamname 4", court: ""}
             ];
  
  for (var i in spielObjekt) {
    $scope.spielListe.push(spielObjekt[i]);
  }

  console.log($scope.spielListe);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="spiel in spielListe">Do something</li>
  </ul>
</div>

Here, You can see in the code snippet that $scope.spielListe is having array of 2 objects and its working fine.

Collectives™ on Stack Overflow

Angular JS ng-repeat not working with Array of Objects

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related