Iterate a JSON object

Question

I want to iterate over a json object transactionByFop.

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}]

Answer 1

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>