angular-ui-grid rows from object keys

Question

I have a container of objects that are stored indexed by their identity in a hash.

myObjs = {
  "hello id":{
    foo:"hello foo data",
    bar:"hello bar data"
  },
  "world id":{
    foo:"world foo data",
    bar:"world bar data"
  }
}

I would like to bind each object in myObjs to a row in a ui-grid (http://ui-grid.info/). In a generic table it would look like:

<table>
    <tr ng-repeat="(id, obj) in myObjs">
      <td>{{id}}</td>
      <td>{{obj.foo}}</td>
      <td>{{obj.bar}}</td>
    </tr>
</table>

One solution is to derive a new array of objects from the contents of myObjs to use as input data to the ui-grid, but this would mean I would have to maintain the binding between myObjs and the derived array input.

Is there a more natural way to bind the ui-grid to myObjs?

Jeremy Friesen Jeremy Friesen · Accepted Answer · 2014-12-22T20:38:27

Can you provide a fiddle/plunk that shows what you are trying to do? ng-repeat can iterate through an object just like it can iterate over an array, so there should be no need to create a derived array from your object.

I created one here: Plunk It looks like it's working fine, so I'm not sure what the issue is.

HTML:

<html ng-app="App">
    <head>
        <title>AngularJS Plunker</title>

        <!-- AngularJS - MVVM Pattern -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

        <!-- Page Specific -->
        <script src="client.js"></script>

    </head>

    <body ng-controller="Controller">

      <table border="1">
        <tr ng-repeat="(id, obj) in myObjs">
          <td>{{id}}</td>
          <td>{{obj.foo}}</td>
          <td>{{obj.bar}}</td>
        </tr>
      </table>

    </body>
</html>

js:

var app = angular.module('App', []);

app.controller('Controller', function ($scope) {

  $scope.myObjs = {
    "hello id":{
      foo:"hello foo data",
      bar:"hello bar data"
    },
    "world id":{
      foo:"world foo data",
      bar:"world bar data"
    }
  }

});

angular-ui-grid rows from object keys

1 Answers