I need to display an array of strings within ui-grid. Single column, one string per row

Question

The REST API I'm calling returns an array in the format:

["a", "b", "c", "d"]

And my ui-grid needs to display those data entries in a single column, one per row.

I have:

  $scope.items = [];

  $scope.gridOptions = {
      data: 'items' 
  };

And my success callback function within my $http call just sets $scope.items to response.data.

This works fine for data in other methods that's received as an array of JSON objects, but in this case where I just get strings, I get the following error in the console twice:

Error: colDef.name or colDef.field property is required

Wat do??

Answer 1

I got it to work by creating this utility function:

function convertArrayOfStringsToGridFriendlyJSON(colName, arr) {
  var out = [];
  arr.forEach(function(entry){
    var obj = {};
    obj[colName] = entry;
    out.push(obj);
  });
  return out;
};

and then setting $scope.items to the output of this function with my column name and the array passed in.

Answer 2

Follow this->binding to 1D array

UI-Grid can also bind be to a one-dimensional array of primitives - in this case using uiGridConstants.ENTITY_BINDING will use the entire entry in the data array as the value for the cell instead of a field therein. This is useful if the data is an array of strings, or also if a cell filter needs access to multiple fields within each row object.

Example:Check this plnkr.

app.controller('OneDimensionCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {

$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'Name', field: uiGridConstants.ENTITY_BINDING }
        ],
        data : [
          "John Rogers",
          "David Michaels",
          "Andrew Johnson",
          "Donald McDonald"
        ]
      };
}]);