Angularjs ui.grid display nested rows

Question

I have been trying to get nested json data inside columns. The json structure is:

[{
    "ratings": [{
            "rating": "Detractor",
            "employees": [{
                "empName": "Pavan",
                "quarters": [{
                    "quarterName": "q1 2015",
                    "weeks": [{
                            "weekName": "week1",
                            "month": "January",
                            "points": [{
                                "0": "point1"
                            }, {
                                "1": "point2"
                            }]
                        }
                        , {
                            "weekName": "week2",
                            "month": "January",
                            "points": [{
                                "0": "point1"
                            }, {
                                "1": "point2"
                            }]
                        }, {
                            "weekName": "week3",
                            "month": "January",
                            "points": [{
                                "0": "point1"
                            }, {
                                "1": "point2"
                            }]
                        }
                    ]
                }, {
                    "quarterName": "q2 2015",
                    "weeks": [{
                            "weekName": "week4",
                            "month": "January",
                            "points": [{
                                "0": "point1"
                            }, {
                                "1": "point2"
                            }]
                        }
                        , {
                            "weekName": "week5",
                            "month": "January",
                            "points": [{
                                "0": "point1"
                            }, {
                                "1": "point2"
                            }]
                        }, {
                            "weekName": "week6",
                            "month": "January",
                            "points": [{
                                "0": "point1"
                            }, {
                                "1": "point2"
                            }]
                        }
                    ]
                }]
            }]
        }
    ]
}]

The output should have rating in one column, the corresponding employees in the next and the points in the third column. I found a solution here, but it deals with only one level and I could not extend it to multiple levels.

I need to display weekly data.

Expected Output

What you're asking is not clear since you have some 1-to-many relations between your entities. Could you make things clearer with an example of output? — imbalind
Will you always have exactly 2 quarters made up of exactly 3 weeks each or is the relationship between quarters and weeks dynamic? — imbalind
It is dynamic. I can have n quarters and each quarter can have upto 13 weeks. — Vaibhav Prasad

imbalind imbalind · Accepted Answer · 2015-12-22T09:14:28

There is no problem accessing nested objects in ui-grid, generally speaking.

In your case the problem seems to be more related to the fact that you have a dynamic structure.

In ui-grid you can assign a value to a column with a string containing the full path for that value, for example:

Suppose you assing ratings sub-array to gridOptions.data, the value of field for week1, week2 and week4 would respectively be:
- 'employees[0].quarters[0].weeks[0].points[0]'
- 'employees[0].quarters[0].weeks[1].points[0]'
- 'employees[0].quarters[1].weeks[0].points[0]'

Now, add to it that the number of weeks and quarters is not fixed and you will find that there is no direct way to programmatically relate the number of the week to the index needed for weeks and quarters array.

I think the best way to handle this would be iterate through the original data you receive and build a new JSON more suited for the grid.

In pseudo code you could do something like this:

initialize results array
iterate through ratings
  create new empty object (current_object)
  add current_object to results array
  iterate through employees
    iterate through quarters
      iterate through weeks
        add value for i-th week as week_i to current_object

Angularjs ui.grid display nested rows

1 Answers