UI-GRID Dynamic column headers and array of object data

Question

I have following data

vm.myData =
        {
            'Type' : 
            [
                'A',
                'B',
                'C'
            ],
            'Data': [
            {
                'Key': 'XXX',
                'AValues':
                {
                    'ID': '1',
                    'Val': '10'
                },
                'BValues':
                {
                    'ID': '2',
                    'Val': '20'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            },
            {
                'Key': 'TTT',
                'AValues':
                {
                    'ID': '2',
                    'Val': '30'
                },
                'BValues':
                {
                    'ID': '4',
                    'Val': '70'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            }
            ]
        };

I am trying to show data as below

Key A   B   C
XXX 10  20  20
TTT 30  70  20

I tried it many ways but not able to get desired result. I want the name of the Columns to come from 'Type' on 'myData'. I am able to display first row by hardcoding.

vm.gridOptions = {
            columnDefs: [
                { name: 'Key', field: 'Data[0].Key'},
                { name: 'A', field: 'Data[0].AValues.Val'},
                { name: 'B', field: 'Data[0].BValues.Val'},
                { name: 'C', field: 'Data[0].CValues.Val'}
            ],
            data: vm.myData
        };

I would really appreciate any help.

Update After going through Naren Mulrali's suggestion, I did following which gives me desired result. But I have hardcoded column names(I need different display names). Is there a way to dynamically get column header from the 'Type' array from 'myData'

vm.gridOptions = {
            columnDefs: [
                { displayName: 'Key', name: 'Key' },
                { displayName: 'A', name: 'AValues.Val' },
                { displayName: 'B', name: 'BValues.Val' },
                { displayName: 'C', name: 'CValues.Val' }
            ],
            data: vm.myData.Data
        };

Naren Murali · Accepted Answer · 2017-08-17 20:02:34Z

1

You need to convert your Object into a format that angular ui grid understands, please refer to the below JSFiddle

        angular.forEach($scope.myData.Data, function(value, index){
          value.AValues = value.AValues.Val;
          value.BValues = value.BValues.Val;
          value.CValues = value.CValues.Val;
          $scope.myData.Data[index] = value;
        });

JSFiddle: link

answered Aug 17, 2017 at 20:02

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

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

8 Comments

user2769614 Over a year ago

I got the desired result after looking at your suggestion. This does not change the data. I have updated my question.

Naren Murali Over a year ago

@user2769614 I understand what you mean, you want the column defs to get generated dynamically, but one question, do we need to use vm.myData.Type array for this, if so why is key not present in this array?

user2769614 Over a year ago

Key is static column name, A, B, C are dynamic column names, I might want column D in future, that is why I am trying to avoid hard coding, another way I see is just have the json send 'A' instead of 'AValues' and my column name would be 'A'.

Naren Murali Over a year ago

@user2769614 If the second option is doable then go for the second option, because the code in the above plunkr does not require columnDefs, if you find this difficult then a for loop is needed to generate the column defs, which is also fine, but you are saying something about static and dynamic columns, which doesn't seem like a good approach.

user2769614 Over a year ago

The solution I used is in my question itself under Update section, marking this as an answer because it helped me get exact code I want.

|

Collectives™ on Stack Overflow

UI-GRID Dynamic column headers and array of object data

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related