How to create nested json data?

Question

I have one Leave List table with json data.

var app=angular.module('myApp',[])
app.controller('myController', ['$scope', '$http', function ($scope, $http) {
    $scope.init = function () {

$scope.holidayList=[
             {
                'month':'JAN',
                'date':01,
                'day': 'Mon',
                'occasion':'New Year'
            },
             {
                'month':'FEB',
                'date': 03,
                'day': 'Fri',
                'occasion':'Maha Shivaratri'
            }

        ];
}
}])

https://jsfiddle.net/856fysen/2/

Here I need to display multiple leaves in single month,for that I have changed my json like this

$scope.holidayList=[
             {
                'month':'JAN',
                'date':[01,07,20],
                'day': ['Mon','Fri','Sun'],
                'occasion':['New Year','pongal','bhogi']
            },
             {
                'month':'FEB',
                'date': 03,
                'day': 'Fri',
                'occasion':'Maha Shivaratri'
            }

        ];

Is it correct?

It's correct, but in my opinion it's also hard to display correctly. I would use like this: `[{ 'JAN': [{ 'date': '01', ...}, { 'date': '07', ...}]}]` — peetya, Nov 05 '17 at 08:24

score 1 · Accepted Answer · answered Nov 05 '17 at 08:44

I would suggest you to use following format, it will be more convenient.

   [{
      'month': 'JAN',
      'Leaves': [{
          'date': '2017-11-05T08:22:06.750Z',
          'day': 'Mon',
          'occassion': 'some_occasion'
          },{
           'date': '2017-11-05T08:22:06.750Z',
           'day': 'Mon',
           'occasion': 'some_occasion'
         }
       ]
     },{
       'month': 'FEB',
       'Leaves': [{
         'date': '2017-11-05T08:22:06.750Z',
         'day': 'Mon',
         'occasion': 'some_occasion'         
          }, {
         'date': '2017-11-05T08:22:06.750Z',
         'day': 'Mon',
         'occasion': 'some_occasion'
    }
}]

You can also use timestamp in date field and write a filter to separate date & day, timestamp is always recommended in such scenario.

score 1 · Answer 2 · answered Nov 05 '17 at 09:01

Your approach is corect.

But consider that the model has to be independent of the implementation and is a good practice to keep it clean and easy to read.

Here is my advice:

1) Do not add model directly to scope. Give it it's own variable so that you can refer to it easier.

2) Do not split the date into it's day/month. Even if they are recursive events, you can add years to your existent fixed dates to find the day-of-week. You can later format your date for display: How to format date in angularjs

'd': Day in month (1-31)

'EEE': Day in Week, (Sun-Sat)

3) Avoid paralel arrays that will complicate your code like:

'date':[01, 07, 20],
'day': ['Mon','Fri','Sun']

4) Do not include presentation instructions in model like levels. The view is responsable to organize the data into levels.

Here is my approach:

var holidayList=[
    {
        date: ['01-01-2016', '02-01-2016'],
        event: 'New Year'
    },
        date: ['13-01-2016', '14-01-2016'],
        month: 'Bhogi'
    },
    {
        date: ['14-01-2016', '17-01-2016'],
        event: 'Thai Pongal'
    },
    {
        date: ['13-02-2016', '14-02-2016'],
        event: 'Maha Shivaratri'
    }
];
$scope.holidayList = holidayList;

The "right" JSON date format

score 0 · Answer 3 · answered Nov 05 '17 at 08:27

0

yes, it is correct and well formatted.

answered Nov 05 '17 at 08:27

Hammed Oyedele

1,030
8
10

yea but I couldn't get this data in html.That is why asked whether it is correct or not. – krish Nov 05 '17 at 08:30
1

You will use index notation to access the nested data e.g {{ list.day[0] }} – Hammed Oyedele Nov 05 '17 at 08:37

How to create nested json data?

3 Answers3