0

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.

antonyboom
  • 1,161
  • 2
  • 17
  • 44
  • any plunker or fiddle, can you post your html? – Yaser Dec 20 '16 at 22:08
  • @YaserAdelMehraban http://plnkr.co/edit/dgIkqq2eFnRUAGHvmkzJ?p=preview it displays data but only for one record – antonyboom Dec 20 '16 at 22:12
  • After checking your plunker and adding a ; after console.log and data = events[i].eventProperties, it seems it is working. Check here: http://plnkr.co/edit/jyqiT5e1k4Uo8ZPUQjCz?p=preview – Yaser Dec 20 '16 at 22:24
  • @YaserAdelMehraban it works wrong, it might be 9 columns and 4 rows, instead 7 columns and 9 rows – antonyboom Dec 20 '16 at 22:27

1 Answers1

0

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

Julian
  • 31
  • 6