AngularJS Question

angularjs ng-repeat iterate dl html

Your help to iterate json object described below "transactionByFop" in the same parent father,
which I want to deploy

HTML

<div ng-show="searhController.orderCAT.results.length" ng-repeat="(key,obj) in searhController.orderCAT.results track by $index">
<dl style="border: 1px;" ng-repeat="(keySub, resp) in obj">
<dt>{{keySub}}</dt>
<dd>{{resp}}</dd>
</dl>
</div>


Json

[{
"lastUpdate": "2015-04-06 12:19:20.902",
"orderId": "83642465",
"idFop": 1,
"transactionByFop": {
"idTransactionByFop": 1523280,
"Binnacle": {
"tbkIdTransaction": 8333514670,
"ackType": "ACK",
"tbkOrderBuy": 1523280,
"tbkCodeCommerce": 123123,
"tbkTypeTransaction": "TR_NORMAL",
"tbkResponse": -1,
"tbkAmount": 3.7298E7,
"tbkCodeAuthorization": 0,
"tbkFinalNumberCard": "213123",
"tbkAccountantDate": "0406",
"tbkTransactionDate": "0406",
"tbkTransactionHour": "121830",
"tbkIdSession": 1523280,
"tbkTypePayment": "VN",
"tbkNumberFee": 0
}
},
"isLast": true}]


thanks

Answer

You'd want to flatten your nested object. Here is something you can do (based on the answer from this thread).

Create a function that'll flatten your object

$scope.flattenResults = function(data) {
  var result = {};

  function recurse(cur, prop) {
    if (Object(cur) !== cur) {
      result[prop] = cur;
    } else if (Array.isArray(cur)) {
      for (var i = 0, l = cur.length; i < l; i++)
        recurse(cur[i], prop + "[" + i + "]");
      if (l == 0)
        result[prop] = [];
    } else {
      var isEmpty = true;
      for (var p in cur) {
        isEmpty = false;
        recurse(cur[p], prop ? prop + "." + p : p);
      }
      if (isEmpty && prop)
        result[prop] = {};
    }
  }
  recurse(data, "");
  return result;
};

Use that in your ng-repeat

<dl style="border: 1px;" ng-repeat="(keySub, resp) in flattenResults(obj)">

See working example below -

var searchapp = angular.module('searchapp', [])
  .controller('searchController', function($scope) {
    $scope.results = [{
      "lastUpdate": "2015-04-06 12:19:20.902",
      "orderId": "83642465",
      "idFop": 1,
      "transactionByFop": {
        "idTransactionByFop": 1523280,
        "Binnacle": {
          "tbkIdTransaction": 8333514670,
          "ackType": "ACK",
          "tbkOrderBuy": 1523280,
          "tbkCodeCommerce": 123123,
          "tbkTypeTransaction": "TR_NORMAL",
          "tbkResponse": -1,
          "tbkAmount": 3.7298E7,
          "tbkCodeAuthorization": 0,
          "tbkFinalNumberCard": "213123",
          "tbkAccountantDate": "0406",
          "tbkTransactionDate": "0406",
          "tbkTransactionHour": "121830",
          "tbkIdSession": 1523280,
          "tbkTypePayment": "VN",
          "tbkNumberFee": 0
        }
      },
      "isLast": true
    }];

    $scope.flattenResults = function(data) {
      var result = {};

      function recurse(cur, prop) {
        if (Object(cur) !== cur) {
          result[prop] = cur;
        } else if (Array.isArray(cur)) {
          for (var i = 0, l = cur.length; i < l; i++)
            recurse(cur[i], prop + "[" + i + "]");
          if (l == 0)
            result[prop] = [];
        } else {
          var isEmpty = true;
          for (var p in cur) {
            isEmpty = false;
            recurse(cur[p], prop ? prop + "." + p : p);
          }
          if (isEmpty && prop)
            result[prop] = {};
        }
      }
      recurse(data, "");
      return result;
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="searchapp" ng-controller="searchController">
  <div ng-show="results.length" ng-repeat="(key,obj) in results track by $index">
    <dl style="border: 1px;" ng-repeat="(keySub, resp) in flattenResults(obj)">
      <dt>{{keySub}}</dt>
      <dd>{{resp}}</dd>
    </dl>
  </div>
</div>

Comments