how to display an array in ui-grid?

Question

I'm developping a hybride application i have an array with this structure

controller.js

 function getReference(fam, souFam, db, trans, $q) {

  var arr = [];
  var deferred = $q.defer();
  var query = null;

  if (trans == "fr") {
    query = "SELECT Reference + '_' + CAST(Durete AS TEXT) AS Reference, Charge, Fleche, Caoutchouc, Coerig, Epais, Durete, Flechemax FROM SUSPENSIONS WHERE Famille = ? AND Fixation = ? ORDER BY Charge";

  } else {
    query = "SELECT Reference + '_' + CAST(Durete AS TEXT) AS Reference, Charge, Fleche, Caoutchouc, Coerig, Epais, Durete, Flechemax FROM SUSPENSIONS WHERE Famille = ? AND Fixang = ? ORDER BY Charge";

  }


  db.executeSql(query, [fam, souFam], function(res) {
      for (var i = 0; i < res.rows.length; i++) {
        arr.push({
          {
          'Reference': res.rows.item(i).Reference,
          'Nominal load (daN)': res.rows.item(i).Charge,
          'Nominal static deflection (mm)': res.rows.item(i).Fleche
        }
        });
      }
      deferred.resolve(arr);
    },
    function(error) {
      console.error(error.message);
      console.log('SELECT error: ÷' + error.message);
    },
    function() {
      console.log('transaction ok');
    });

  return deferred.promise;
}

$scope.gridOptions= getReference(par1, par5,par3,par4,par5);

HTML

 <div ui-grid=" {data: gridOptions}" class="grid"> </div>

but in my ui-grid only 'reference' column data are displayed and for the others only header is displayed.

only