How to use Angular ui-grid with array of string

Question

I have used Angular ui-grid to represent an array of json objects from response. However, my current use case returns an array of string values in the response. In such as case, how should the grid be configured?

$http.get(url)
.success(function(data) {
  if(data.length <= 0 && data != undefined) {
    $scope.noDataGridEpr="Data is not Available";
    console.log("Data is not Available");
  }
  console.log("Data is" + data);
  $scope.prList = data; 
  console.log("prList is" + $scope.prList); //an array of strings
  $scope.dataLoadedEpr=true;
  return true;
})
.error(function(data, status) {
  console.log("Error from controller. Could not query.");
  return false;
})

This prints

prList is[A/DN,B/LCK,10,10,same,match,match],
[B/DN,D/LCK,10,10,same,mismatch,match],
[G/DN,D/LCK,10,10,same,mismatch,mismatch]

Here is how my current grid configuration looks

$scope.prGrid = { 
data: 'prList',
columnDefs: [
{field: 'DPin', displayName: 'DPin', width: "5%"},
{field: 'CPin', displayName: 'CPin', width: "5%"},
{field: 'slack1', displayName: 'slack1', width: "5%"},
{field: 'slack2', displayName: 'slack2', width: "5%"},
{field: 'cComp', displayName: 'cComp', width: "10%"},
{field: 'dComp', displayName: 'dComp', width: "5%"},
{field: 'gComp', displayName: 'dComp', width: "5%"}
 enableFiltering: true,
  multiSelect: false,
  enableGridMenu: true,
  enableRowHeaderSelection: false, 
  enableSorting: true,
  enableColumnResizing: true
};

I understand the field config above is incorrect. Given I have an array of string as i/p, can someone guide me on how to set the array of string in the grid, each representing a row?

Thanks.

Answer 1

Follow this->binding to 2D array

Example:Check this plnkr.

app.controller('TwoDimensionCtrl', ['$scope','$timeout','uiGridConstants', function ($scope,$timeout,uiGridConstants) {
  $scope.data=[
              ["Cox", "Carney", "Enormo", true],
              ["Lorraine", "Carney", "Comveyer", false],
              ["Nancy", "Waters", "Fuelton", false]
            ];

  $scope.gridOptions = {
          enableSorting: true,
          columnDefs: [
            { name: "firstName", field: "0" },
            { name: "lastName", field: "1" },
            { name: "company", field: "2" },
            { name: "employed", field: "3" }
          ],
          data : $scope.data
        };
  $timeout(function () {
    $scope.data[0][0]="TestMod";
  },5000);

}]);

Answer 2

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

Tried this to create/set the json object thats consumed by ui-grid. This works.

$scope.prList = convertArrayOfStringsToGridFriendlyJSON(data);

function convertArrayOfStringsToGridFriendlyJSON(arr) {
var out = [];
arr.forEach(function(entry){
entry = entry.replace('[' , '')
entry = entry.replace(']' , '')
entry = entry.split(',')

var obj = {}; //json object        
var DPin= "DPin"; //keys
var CPin= "CPin"; 
obj[DPin] = entry[0];
obj[CPin] = entry[1];
out.push(obj);
});
return out;
};