Setting table with object in angular

Question

I have an object I want to put in a table. the object seems like: {"text":"111","order":["1","2","3","4","5"]} there may be array as well as simple strings. So how can I put this object in a table if I want the table to look like this:

property   value
text       111
order      1,2,3,4,5

My table shows in the value column ["1","2","3","4","5"] instead of 1,2,3,4,5.

Here is what I wrote:

<tr data-ng-repeat="(key,val) in object">
    <td>
        {{ key }}
    </td>   
    <td>
        {{val}}
    </td>        
</tr>

I also tried with ng-swtich but it didn't work.

Can you post more of your relevant code? At least the controller for your app? — markthethomas
– markthethomas, Commented Jan 12, 2015 at 17:23

Karthik · Accepted Answer · 2015-01-12 17:31:57Z

1

Here is a sample which checks if the value is an Array and joins them as a string.

Html:

 <tr data-ng-repeat="(key,val) in object">
    <td>
        {{ key }}
    </td>   
    <td>
        {{val | isArray}}
    </td>        
  </tr>

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.object = {"text":"111","order":["1","2","3","4","5"]};
});

app.filter("isArray", function() {
      return function(input) {
        var isArray = angular.isArray(input);
        if(isArray)
          return input.join();
        return input;
      };
});

Working code here

answered Jan 12, 2015 at 17:31

Karthik

1,3776 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scymex · Accepted Answer · 2015-01-12 17:36:40Z

1

Is this what you were after?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="MyTableController">
  <tr data-ng-repeat="(key,val) in data">
    <td>
      {{ key }}
    </td>

    <td >
      {{ val | join: ', ' }}
    </td>        
  </tr>
</table>

<script>
angular.module('app', [])
  // Filter that joins the input with the supplied separator
  .filter('join', function () {
    return function (value, separator) {
      if (typeof value.join === 'function') {
        return value.join(separator);
      } else {
        return value;
      }
    }
  })
  .controller('MyTableController', function ($scope) {
    $scope.data = {"text":"111","order":["1","2","3","4","5"] };
  });
</script>

answered Jan 12, 2015 at 17:36

Scymex

1,08411 silver badges18 bronze badges

1 Comment

marco polo Over a year ago

Thank you for your answer, it is what i'm looking for. unfortunately I cant accept 2 answers

Collectives™ on Stack Overflow

Setting table with object in angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related