CODEWITHSUNDEEP
javascriptjqueryangularjs
user4324324
user4324324

Reputation: 559

Dynamically adding column in table

I am trying to add new column dynamically in the table. I have below object which is returned in response from web service api. How can I display dynamic columns where myArray object is getting appended with many other fields (new columns)

 $scope.myArray =  [
    {
  "contacts": [
    {
      "id": "1",
      "contact": {
        "name": "Sam",
        "Email": "[email protected]",
        "PhoneNo": 2355
      }
    },
    {
      "id": "2",
      "contact": {
        "name": "John",
        "Email": "[email protected]",
        "PhoneNo": 2355
      }
    }
  ]
}
  ];

I have tried looking into the example provided in some of the answers in google. In my below JSFIDDLE, I am getting only the key name but not the values. How can I achieve both key and value using ng-repeat where the key names are dynamic.

Upvotes: 0

Views: 46

Answers (1)

Prathamesh Palav
Prathamesh Palav

Reputation: 431

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.myArray =  [
    {
  "contacts": [
    {
      "id": "1",
      "contact": {
        "name": "Sam",
        "Email": "[email protected]",
        "PhoneNo": 2355
      }
    },
    {
      "id": "2",
      "contact": {
        "name": "John",
        "Email": "[email protected]",
        "PhoneNo": 2355
      }
    }
  ]
}
  ];
  });

angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<table ng-controller="myController" border="1">
  <tr>
    <th ng-repeat="(key, val) in myArray[0].contacts[0].contact">{{ key }}</th>
  </tr>
  <tr ng-repeat="row in myArray[0].contacts">
    <td ng-repeat="(key, val) in row.contact">{{ val }}</td>
  </tr>
</table>

Upvotes: 1

Related Questions