CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Jaison James
Jaison James

Reputation: 4552

angularjs ng-repeat with dynamic json/object

I am looking a solution for dynamic data structure(inconsistent like different property name and property length) with ng-repeat. sample code are below.

    $scope.data = [{
        "table":[{
        "employee":"name1",
        "value1":"10",
        "value2":"20"
        },
        {
        "employee":"name2",
        "value1":"15",
        "value2":"30"
        }]
    },
    {
        "table":[{
        "company":"name1",
        "compnayValue":"12"
        },
        {
        "company":"name2",
        "compnayValue":"12"
        }]
    }]

    <ul>
        <li ng-repeat="item in data">
            <table>
                <tr ng-repeat="row in item.table">
                    <td>{{??}}</td>
                    <td>{{??}}</td>
                </tr>
            </table>
        </li>
    </ul>

Upvotes: 0

Views: 1209

Answers (3)

T J
T J

Reputation: 43156

Use <tbody> to represent an object inside table array and (key,value) syntax mentioned in iterating over object properties section to iterate over it's properties like:

angular.module('test', []).controller('testCtrl', function($scope) {
  $scope.data = [{
    "table": [{
      "employee": "name1",
      "value1": "10",
      "value2": "20"
    }, {
      "employee": "name2",
      "value1": "15",
      "value2": "30"
    }]
  }, {
    "table": [{
      "company": "name1",
      "compnayValue": "12"
    }, {
      "company": "name2",
      "compnayValue": "12"
    }]
  }]
});
ul {
  padding: 0;
}
ul li {
  list-style-type: none;
  margin-bottom: 10px;
}
table {
  width: 100%;
  table-layout: fixed;
  background: #ebebeb;
}
tbody:nth-child(odd) tr {
  color: #fff;
  background: dodgerblue;
}
tbody:nth-child(even) tr {
  color: #fff;
  background: hotpink;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <ul>
    <li ng-repeat="item in data">
      <table>
        <tbody ng-repeat="row in item.table">
          <tr ng-repeat="(key, value) in row">
            <td>
              {{key}}
            </td>
            <td>
              {{value}}
            </td>
          </tr>
        </tbody>
      </table>
    </li>
  </ul>
</div>

Upvotes: 1

Silvinus
Silvinus

Reputation: 1445

Check this plunker, you can define template depends on your data : https://plnkr.co/edit/fVGhKZy5gnBzuPwspy5s?p=preview

Use angular filter : 

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [{
      "table":[{
      "employee":"name1",
      "value1":"10",
      "value2":"20"
      },
      {
      "employee":"name2",
      "value1":"15",
      "value2":"30"
      }]
  },
  {
      "table":[{
      "company":"name1",
      "compnayValue":"12"
      },
    {
    "company":"name2",
    "compnayValue":"12"
    }]
  }]
 })
  .filter('isCompnay', function() {
   return function(input) {
   console.log(input.employee === undefined)
   return input.company ? input : undefined;
  };
})
.filter('isEmployee', function() {
return function(input) {
  console.log(input.employee === undefined)
  return input.employee ? input : undefined;
   };
 });

Upvotes: 0

Saeb Amini
Saeb Amini

Reputation: 24400

You could enumerate all properties and display their values by another ng-repeat on td:

<li ng-repeat="item in data">
  <table>
    <tr ng-repeat="row in item.table">
      <td ng-repeat="(key, value) in row">
        {{row[key]}}
      </td>
    </tr>
  </table>
</li>

but that would break the tabular format of data since some rows would have more tds. To prevent that you could first find out the set of all keys on all rows, do a th repeat with those first and then display them on the corresponding td below, e.g.:

<th ng-repeat="propertyName in allPossiblePropertyNames">
  {{propertyName}}
</th>

and

<td ng-repeat="propertyName in allPossiblePropertyNames">
  {{row[propertyName ]}}
</td>

Upvotes: 3

Related Questions