title: Angularjs - Dynamic data directive - create objects from strings
body: <p>I am writing a directive that represents a table that gets populated with dynamic data. The dynamic data includes dynamic number of columns as well..</p>
  
  <p>Here is my <strong>plunker</strong>:
  <a href="http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview" rel="nofollow">http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview</a></p>
  
  <p><strong>My directive code looks like this:</strong></p>
  
  <pre><code>app.directive("myTable", function() {
    return {
    restrict: "E",
    replace: true,
    scope: true,
    controller: function($scope, $element, $attrs, $http) {
  
    // Get Table Data
    $http.get('my-table.json').success(function(data) {
      $scope.tableData = data;
      console.log($scope.tableData);
  
      $scope.tblKeys = [];
  
      for (key in $scope.tableHeader) {
        if ($scope.tableHeader.hasOwnProperty(key)) {
          $scope.tblKeys.push({key: key});
        }
      }
      console.log($scope.tblKeys);
  
    });
    },
    templateUrl: "template.html",
    compile: function(element, attrs) {
  
    return function(scope, element, attrs) {
  
      scope.css = attrs.css;
      attrdata = attrs.values;
  
      //attrdata = "{'id':'ID Col', 'name':'Name Col', 'price':'Price Col', 'qty':'Quantity'}";
  
      convertdata = attrdata.replace(/'/g, '"');
      json = JSON.parse(convertdata);
  
      scope.tableHeader = json;
      console.log(scope.tableHeader);
  
    }; // return
  
    } // compile
    }
  });
  </code></pre>
  
  <p><strong>And this is the directive template</strong></p>
  
  <pre><code>&lt;table class="{{css}}" width="80%"&gt;
  
  &lt;thead&gt;
  &lt;tr&gt;
      &lt;th ng-repeat="title in tableHeader"&gt;
          {{title}}
      &lt;/th&gt;
      &lt;th&gt;
          Cost
      &lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  
  &lt;tr ng-repeat="items in tableData"&gt;
  
      // &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; THIS IS WHERE I NEED HELP  &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;
  
      &lt;td&gt; {{ items.id }}&lt;/td&gt;
      &lt;td&gt; {{ items.name }}&lt;/td&gt;
      &lt;td&gt; {{ items.price }}&lt;/td&gt;
      &lt;td&gt; {{ items.qty }}&lt;/td&gt;
  
      &lt;td&gt; {{ items.qty*items.price }}&lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td colspan="2"&gt;Total&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>THE PROBLEM</strong></p>
  
  <hr>
  
  <p>My directive is supposed to be able to set the columns data dynamically. I have been able to get the keys of values from the table object that the directive receives as an argument but I am unable to dynamically populate the table data from the tabeData objects using dynamic keys stored into scope.tblKeys</p>
  
  <p>In my template these 4 lines where I would like to avoid using id,name,price and qty and instead get that data somehow from scope.tblKeys</p>
  
  <pre><code>    &lt;td&gt; {{ items.id }}&lt;/td&gt;
      &lt;td&gt; {{ items.name }}&lt;/td&gt;
      &lt;td&gt; {{ items.price }}&lt;/td&gt;
      &lt;td&gt; {{ items.qty }}&lt;/td&gt;
  </code></pre>
  
  <p>Something to the tune of</p>
  
  <pre><code>&lt;tr ng-repeat="items in tableData"&gt;
  
      &lt;td ng-repeat="key in tblKeys"&gt;  {{ items.key }}&lt;/td&gt;
  
      &lt;td&gt; {{ items.qty*items.price }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I am not sure how to make this happen <code>{{ items.key }}</code> and I am writing this part to illustrate what I need</p>
  
  <pre><code>&lt;td ng-repeat="key in tblKeys"&gt;  {{ items.key }}&lt;/td&gt;
  </code></pre>
  
  <p>I suppose I could use angular $parse but I am not sure how to approach this.</p>
  
  <p>I would really appreciate some help.</p>