how to map the columnNames to table data and show only that data in uigrid

Question

i get columnNames dynamically with object inside of an property,i just want to show only that property which is inside of that object.

this is my columnNames

  $scope.columnNames=[
{"field":"firstName"},
{"field":"lastName"},
{"field":"id"},//i can get "id" or "name" or anything it comes dynamically 
{"field":"employed"}
];

and i get the data like this $scope.gridOptions.data = [ { "firstName": "Cox", "lastName": "Carney", "id": "{'id':'1','name':'Syed'}", "employed": true }, { "firstName": "Lorraine", "lastName": "Wise", "id": "{'id':'2','name':'Rasheed'}", "employed": false }, { "firstName": "Nancy", "lastName": "Waters", "id": "{'id':'3','name':'Emir'}", "employed": false } ];

when i run this am getting the whole object "{'id':'3','name':'Emir'}" in id column but i want only that id property value to show in that column. and this is my plunker http://plnkr.co/edit/AMeTxuMMBmfVt9f0t7HZ?p=preview

Answer 1

See this plnkr

added the following code to parse the id from json to id field

angular.forEach($scope.gridOptions.data, function(value, key) {
    var parsedId = angular.fromJson(value.id.replace(/'/g, '"')); 
    value.id = parsedId.id;
  });

also, seems like your json is ' delemited instead of ", so I had to replace the string so JSON could be parsed but if you are getting proper JSON form server you don't need to do that. Hope this helps

Answer 2

Try using cellTemplate in $scope.columnNames.

Just add cellTemplate: '<span>{{COL_FIELD[col.field] to $scope.columnNames like this:

  $scope.columnNames=[
      {"field":"firstName"},
      {"field":"lastName"},
      {"field":"id", cellTemplate: '<span>{{COL_FIELD[col.field]}}</span>'}, //this cellTemplate works for "id" or "name" or anything
      {"field":"employed"}
    ];

Since you get $scope.columnNames dynamically, you can add cellTemplate like this:

$scope.columnNames[2].cellTemplate='<span>{{COL_FIELD[col.field]}}</span>';

See this plnkr