angularjs - Angular UI-Grid Pivot

Question

I have a collection of these Javascript objects: (Displayed as a DTO)

public class ParameterValueDTO : DataTransferObject
{
  public int Id { get; set; }
  public String Comments { get; set; }
  public String Description { get; set; }
}

By default, AngularJS UI-Grid will create a row for each ParameterValue object with 3 columns: Id, Comments, Description which works fine.

IMAGE: Standard objects mapping to table

What I would like to do however is create a column for each object's "Comments" value and bind it to the corresponding "Description" value. Essentially pivoting the table so it only has 1 row (forget the ID column for now).

The javascript I've tried:

var cols = [];
var row = obj.data.ProductAttributes[0].Specifications[0].ParameterValues
var length = row.length;


for (var i = 0; i < length; i++) {
    cols.push({
        field: "Description",
        displayName: row[i].Comments
    });
}

$scope.gridOptions = {
    columnDefs: cols,
    data: row
};

The above results in the following which is obviously wrong:

IMAGE: One column, new row for each Description

Is it possible to accomplish this with the current data structure or what exactly is the correct approach I should be taking?

Answer 1

I'd modify the code to just reprocess your data. ui-grid really only likes to bind to columns and rows, it can't reverse the order.

So you'd:

var pivotData = [ {} ];
data.forEach(function(parameterDTO) {
  pivotData[0][parameterDTO.comments] = parameterDTO.description;
});

Then you should be able to use that new data object as grid data.