ng-repeat for nested array in angular

Question

I am getting data in nested array.

I am trying to display my data in this format

Jan

01 Mon newyear
13 sat bhogi
14 sun pongal

Feb

14 tue Valentine's day

Am little bit confused to loop it.

This is what I have tried

<table ng-repeat="list in holidayList" style="width:100%">
                            <thead>
                                <tr>
                                    @*<th>{{list.}}</th>*@
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="leave in list">
                                    <td width="14%">{{leave.date}}</td>
                                    <td width="20%">{{leave.monthCode}}</td>
                                    <td>{{leave.holiday_name}}</td>
                                </tr>
                            </tbody>
                        </table>

Converting date is doesn't matter I wrote custom filter and method for that so I can get expected date format by using this filter and method:

app.filter('jsonDate', function () {
    return function (date) {
        return new Date(date.match(/\d+/)[0] * 1);
    }
})

$scope.dateFormat = function (date) {
        $scope.formattedDate = date.getFullYear() + "-" + (((date.getMonth() + 1).length) == 2 ? (date.getMonth() + 1) : ("0" + (date.getMonth() + 1))) + "-" + ((date.getDay().length) == 2 ? date.getDay() : ("0" + date.getDay()));
        return $scope.formattedDate
    }

Current output:

/Date(1484397151447)/   1   pongal
/Date(1484310751447)/   1   Bhogi
/Date(1483273951447)/   1   new year
/Date(1494855933060)/   5   may day

Can any one tell me that how should I loop to get expected format.

can you able to post your data

Kalaiselvan
– Kalaiselvan

2017-12-06 04:04:31 +00:00
Commented Dec 6, 2017 at 4:04 — Kalaiselvan
– Kalaiselvan, Commented Dec 6, 2017 at 4:04
What are you currently getting for the output?

nipuna-g
– nipuna-g

2017-12-06 04:06:04 +00:00
Commented Dec 6, 2017 at 4:06 — nipuna-g
– nipuna-g, Commented Dec 6, 2017 at 4:06
@nipuna777 check updated post.

krish
– krish

2017-12-06 04:08:59 +00:00
Commented Dec 6, 2017 at 4:08 — krish
– krish, Commented Dec 6, 2017 at 4:08

NuelG · Accepted Answer · 2017-12-06 04:17:55Z

3

You could just directly access the object: (I am assuming that the month is defined in each array item)

<table ng-repeat="list in holidayList" style="width:100%">
    <tbody>
        <tr>
            <td>{{list[0].month}}</td>
        </td>
        <tr ng-repeat="leave in list">
            <td width="14%">{{leave.date}}</td>
            <td width="20%">{{leave.monthCode}}</td>
            <td>{{leave.holiday_name}}</td>
        </tr>
    </tbody>
</table>

If month is not defined then use javascript array for months:

$scope.months = ["Jan", "February, "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

Then on your html:

<td>{{months(list[0].monthCode - 1)}}</td>

or just list[0].monthCode if monthCode starts with 0 for Jan.

edited Dec 6, 2017 at 4:17

answered Dec 6, 2017 at 4:09

NuelG

2111 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

ng-repeat for nested array in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related