display multidimensional array data angular ui-grid

Question

I get next data structure array from api:

 var data = [
                    {
                        id: 1,
                        name: 'test 1',
                        properties: [
                            {
                                id: 101, 
                                name: 'custom 01'
                            },
                            {
                                id: 102,
                                name: 'custom 02'
                            }
                        ]
                    },
                   {
                       id: 2,
                       name: 'test 2',
                       properties: [
                           {
                               id: 201,
                               name: 'custom 21'
                           },
                           {
                               id: 202,
                               name: 'custom 22'
                           }
                       ]
                   }
                   and etc ...
                ]

I need to display data from nested array properties from each record. This is how I'm trying to do:

    $scope.gridOptions = {};
    $scope.gridOptions.columnDefs = [];
    $scope.gridOptions.data = data.data;


    $scope.load = function (param) {

            lovServices.events(param)
                .then(function (response) {

                    var events = response.events;

                    for (var i = 0; i < events.length; i++) {
                        console.log(events[i].eventProperties)
                        $scope.gridOptions.data = events[i].eventProperties
                    }

                })
        }
    });

console.log(events[i].eventProperties) shows me the right data set, but the grid is still empty. I appreciate if somebody could tell me where is my mistake? Thanks in advance.

Answer 1

In order to build your grid, you need to take a look at $scope.gridOptions.columnDefs = [];

Check http://ui-grid.info/docs/#/tutorial/201_editable up, there is the example of how to define each column with the help of columnDefs property using your array of objects