How to display an array with AngularJs in my case?

Question

I have a javascript array like the following:

var array = [
   2005 = [
       Jan = [0,1,2,3,5...],
       Feb = [0,1,2,3,5...],
       ...more
   ], 
   2006 = [
       Jan = [0,1,2,3,5...],
       Feb = [0,1,2,3,5...],
       ...more
   ], 
   2007 = [
       Jan = [0,1,2,3,5...],
       Feb = [0,1,2,3,5...],
       ...more
   ]

]

$scope.cal = array;

I am trying to build a calendar with ng-repeat

<div ng-repeat = "year in cal">
    {{year}}
</div>

There is nothing output and I got an error

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. 
Repeater: year in cal, Duplicate key: undefined:undefined, Duplicate value: undefined

I am not sure what I did wrong and my brain is fried. Please help me out on this one. Thanks!

@KalhanoToressPamuditha I did try that, all I got is 3 lines of [] — BonJon
– BonJon, Commented Oct 30, 2014 at 6:11
@KalhanoToressPamuditha not sure what your question mean. I got [] [] [] for three different divs — BonJon
– BonJon, Commented Oct 30, 2014 at 6:13

Denis Thomas · Accepted Answer · 2014-10-30 07:19:58Z

You need a common property between the different year entries that you can bind to. So you need some kind of a value property which holds the identifier like the year or the month and another property that holds the value array. See the example below.

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.cal = [
        {
            value: 2005,
            month:
            [
                {
                    value: 'Jan',
                    days: [0, 1, 2, 3]
                },
                {
                    value: 'Feb',
                    days: [0, 1, 2, 3]
                }
            ]
        },
        {
            value: 2006,
            month:
            [
                {
                    value: 'Jan',
                    days: [0, 1, 3, 7]
                },
                {
                    value: 'Feb',
                    days: [0, 1, 2, 3]
                }
            ]
        }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
      <div ng-repeat = "year in cal">
          Year: {{year.value}}
          <div ng-repeat = "month in year.month">
              Month: {{month.value}}
              <div ng-repeat = "day in month.days">
                Day: {{day}}
              </div>
          </div>
      </div>
    </div>
</div>

bhantol · Accepted Answer · 2014-10-30 06:48:54Z

1

Check the working plunker here

Apart from the syntax problems of JSON object the design should be something like this:

    [
        {
           yearNum: 2005,
           months: [
                        {Jan : [0,1,2,3,5]},
                        {Feb : [0,1,2,3,5]},
                      ]
        }, 
        {
           yearNum: 2006,
           months: [
                        {Jan : [0,1,2,3,5]},
                        {Feb : [0,1,2,3,5]},
                      ]
        }
    ]

answered Oct 30, 2014 at 6:48

bhantol

9,6368 gold badges48 silver badges84 bronze badges

1 Comment

BonJon Over a year ago

Thanks! but Denis's is better for what I need! +1

Urielzen · Accepted Answer · 2014-10-30 06:43:41Z

0

Try formatting you array like this.

var array = [
   { 2005: [
      { Jan: [0, 1, 2, 3, 5] },
      { Feb: [0, 1, 2, 3, 5] },
   ]
}];

answered Oct 30, 2014 at 6:43

Urielzen

5368 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to display an array with AngularJs in my case?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related