Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

Can you please help me generating HTML Table by using the JSON data with Angular ng-repeat.

Demo

JSON Data

{
  "account": {
    "accountId": "54545",
    "premise": {
      "address": {
        "address1": "1800 Bishop Gate Boulevard",
        "address2": "Apartment 129",
        "city": "Mount Laurel",
        "province": "NJ",
        "postalCode": "08054",
        "country": "US",
        "direction": null,
        "externalReference": null,
        "verified": false
      },
      "timeZone": "US_EASTERN",
      "locale": "EN",
      "camera": [
        {
          "id": "175277.2",
          "name": "camera1",
          "macAddress": "00:0E:8F:5B:AB:88",
          "manufacturer": "gabreal",
          "model": "iCamera",
          "serialNumber": "000E8F5BAB88",
          "firmwareVersion": "3.0.01.07",
          "hardwareVersion": null
        },
        {
          "id": "175277.3",
          "name": "camera2",
          "macAddress": "D4:21:22:D9:D0:73",
          "manufacturer": "gabreal",
          "model": "iCamera2-C",
          "serialNumber": "D42122D9D073",
          "firmwareVersion": "3.0.02.39",
          "hardwareVersion": null
        },
        {
          "id": "175277.1",
          "name": "camera3",
          "macAddress": "00:0E:8F:95:A8:A6",
          "manufacturer": "gabreal",
          "model": "SerComm_Camera_8021",
          "serialNumber": "000E8F95A8A6",
          "firmwareVersion": "1.0.24",
          "hardwareVersion": null
        }
      ],
      "thermostat": [
        {
          "id": "0024460000084172.10",
          "name": "Thermostat1",
          "type": "THERMOSTAT",
          "manufacturer": "RTCOA",
          "serialNumber": null,
          "firmwareVersion": "0x00000587",
          "hardwareVersion": "192",
          "model": "CT30S"
        },
        {
          "id": "000d6f0003ec6669.1",
          "name": "Thermostat2",
          "type": "THERMOSTAT",
          "manufacturer": "CentraLite Systems",
          "serialNumber": null,
          "firmwareVersion": "0x1418468c",
          "hardwareVersion": "2",
          "model": "3156105"
        }
      ],
      "zone": [
        {
          "id": 1,
          "name": "one",
          "type": "DOOR",
          "functionType": "ENTRY_EXIT",
          "sensor": [
            {
              "id": 1,
              "type": "DRY_CONTACT",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f00030cdbcf.1",
              "model": "MCT-320 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x00040008",
              "hardwareVersion": "1"
            }
          ]
        },
        {
          "id": 2,
          "name": "Motion",
          "type": "MOTION",
          "functionType": "INTERIOR_FOLLOWER",
          "sensor": [
            {
              "id": 2,
              "type": "MOTION",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f0004b2af93.1",
              "model": "NEXT K85 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x0004000b",
              "hardwareVersion": "1"
            }
          ]
        }
      ],
      "cpe": {
        "cpeId": "9c972684b2ca",
        "name": null,
        "deploymentModel": "WIFI_CLIENT_PSK_2_MODE",
        "serialNumber": null,
        "manufacturer": "Technicolor",
        "model": "TCA203",
        "hardwareRev": "5",
        "passPhrase": "528233",
        "cellularProfileName": null,
        "imeiNumber": 359942045924230,
        "iccId": "89011703258034552401",
        "simCardPhoneNumber": null,
        "simCardAccountNumber": null,
        "wifiMacAddress": "70:25:59:79:E2:EE",
        "firmwareVersion": "7_3_8_050000_201611152386",
        "widget": [
          {
            "name": "com.wsi.android.Gabreal",
            "version": "1.2"
          },
          {
            "name": "com.icontrol.apps.clock",
            "version": "1.0.0.0.3"
          }
        ],
        "module": []
      },
      "premiseId": null
    },
    "source": "INTERNAL"
  }
}

The table I want to generate as below

<table>
  <tr>
    <th>Property<br></th>
    <th>camera</th>
    <th>camera</th>
    <th>camera</th>
    <th>thermostat</th>
    <th>thermostat</th>
    <th>sensor</th>
    <th>sensor</th>
  </tr>
  <tr>
    <td>id</td>
    <td>175277.2</td>
    <td>175277.3</td>
    <td>175277.1</td>
    <td>0024460000084172.10</td>
    <td>000d6f0003ec6669.1</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>name</td>
    <td>camera1</td>
    <td>camera2</td>
    <td>camera3</td>
    <td>Thermostat1</td>
    <td>Thermostat2</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>macAddress</td>
    <td>00:0E:8F:5B:AB:88</td>
    <td>D4:21:22:D9:D0:73</td>
    <td>00:0E:8F:95:A8:A6</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>manufacturer</td>
    <td>gabreal</td>
    <td>gabreal</td>
    <td>gabreal</td>
    <td>RTCOA</td>
    <td>CentraLite Systems</td>
    <td>Visonic</td>
    <td>Visonic</td>
  </tr>
</table>

Note : Aruna has answered the question, but it fails when there different type JSON Object like zone object is different from others.

share|improve this question
    
plnkr.co/edit/zN1KJKqZrBjMsqySkYtC?p=preview .....not sure if this is the most efficicent way of doing but this could definitely give you a headstart – Anirudh Mangalvedhekar Nov 29 '16 at 14:10
    
Anirudh I dont want to write this way because I just written simple JSON to know the logic. Actually my json has lot of objects like Camera and Thermostat. I want to loop through all the Objects and get the details. – Batman Nov 29 '16 at 14:15
2  
@Batman Can you check the below solution. It's generic with the objects. Only name and id properties are hard coded – Aruna Nov 29 '16 at 14:18
    
@cale_b please check the question I have clearly mentioned the demo i have tried Demo – Batman Nov 29 '16 at 14:40
    
Copy the relevant code in to your question. – cale_b Nov 29 '16 at 14:46
up vote 3 down vote accepted
+50

This is a generic solution with the object and the properties.

Updated as per the json change on the Bounty request.

var app = angular.module('studentApp', []);

app.controller('StudentCntrl', function($scope,$http) {
    //$http.get('data.json').then(function (response){
	              //console.log(response.data.pages);
                //$scope.deviceInfo = response.data.account.premise;
        //});
  
var responseData = {
  "account": {
    "accountId": "54545",
    "premise": {
      "address": {
        "address1": "1800 Bishop Gate Boulevard",
        "address2": "Apartment 129",
        "city": "Mount Laurel",
        "province": "NJ",
        "postalCode": "08054",
        "country": "US",
        "direction": null,
        "externalReference": null,
        "verified": false
      },
      "timeZone": "US_EASTERN",
      "locale": "EN",
      "camera": [
        {
          "id": "175277.2",
          "name": "camera1",
          "macAddress": "00:0E:8F:5B:AB:88",
          "manufacturer": "gabreal",
          "model": "iCamera",
          "serialNumber": "000E8F5BAB88",
          "firmwareVersion": "3.0.01.07",
          "hardwareVersion": null
        },
        {
          "id": "175277.3",
          "name": "camera2",
          "macAddress": "D4:21:22:D9:D0:73",
          "manufacturer": "gabreal",
          "model": "iCamera2-C",
          "serialNumber": "D42122D9D073",
          "firmwareVersion": "3.0.02.39",
          "hardwareVersion": null
        },
        {
          "id": "175277.1",
          "name": "camera3",
          "macAddress": "00:0E:8F:95:A8:A6",
          "manufacturer": "gabreal",
          "model": "SerComm_Camera_8021",
          "serialNumber": "000E8F95A8A6",
          "firmwareVersion": "1.0.24",
          "hardwareVersion": null
        }
      ],
      "thermostat": [
        {
          "id": "0024460000084172.10",
          "name": "Thermostat1",
          "type": "THERMOSTAT",
          "manufacturer": "RTCOA",
          "serialNumber": null,
          "firmwareVersion": "0x00000587",
          "hardwareVersion": "192",
          "model": "CT30S"
        },
        {
          "id": "000d6f0003ec6669.1",
          "name": "Thermostat2",
          "type": "THERMOSTAT",
          "manufacturer": "CentraLite Systems",
          "serialNumber": null,
          "firmwareVersion": "0x1418468c",
          "hardwareVersion": "2",
          "model": "3156105"
        }
      ],
      "zone": [
        {
          "id": 1,
          "name": "one",
          "type": "DOOR",
          "functionType": "ENTRY_EXIT",
          "sensor": [
            {
              "id": 1,
              "type": "DRY_CONTACT",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f00030cdbcf.1",
              "model": "MCT-320 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x00040008",
              "hardwareVersion": "1"
            }
          ]
        },
        {
          "id": 2,
          "name": "Motion",
          "type": "MOTION",
          "functionType": "INTERIOR_FOLLOWER",
          "sensor": [
            {
              "id": 2,
              "type": "MOTION",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f0004b2af93.1",
              "model": "NEXT K85 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x0004000b",
              "hardwareVersion": "1"
            }
          ]
        }
      ],
      "cpe": {
        "cpeId": "9c972684b2ca",
        "name": null,
        "deploymentModel": "WIFI_CLIENT_PSK_2_MODE",
        "serialNumber": null,
        "manufacturer": "Technicolor",
        "model": "TCA203",
        "hardwareRev": "5",
        "passPhrase": "528233",
        "cellularProfileName": null,
        "imeiNumber": 359942045924230,
        "iccId": "89011703258034552401",
        "simCardPhoneNumber": null,
        "simCardAccountNumber": null,
        "wifiMacAddress": "70:25:59:79:E2:EE",
        "firmwareVersion": "7_3_8_050000_201611152386",
        "widget": [
          {
            "name": "com.wsi.android.Gabreal",
            "version": "1.2"
          },
          {
            "name": "com.icontrol.apps.clock",
            "version": "1.0.0.0.3"
          }
        ],
        "module": []
      },
      "premiseId": null
    },
    "source": "INTERNAL"
  }
};
  
var headerProperty = $scope.headerProperty = 'deviceType';
  
rebuildDeviceInfo(responseData);
  
function rebuildDeviceInfo(data) {
  var deviceInfoData = responseData.account.premise;
  var deviceInfo = [], deviceProperties = [];
  
  // Parse devices
  angular.forEach(deviceInfoData, function(devices, deviceKey) {
    if(angular.isArray(devices)) {
       deviceInfo = deviceInfo.concat(parseDevices(devices, deviceKey));
    }
  });
  
  // Parse device properties
  for(var i = 0; i < deviceInfo.length; i++) {
    var device = deviceInfo[i];
    angular.forEach(device, function(value, deviceProperty) {
      if(deviceProperties.indexOf(deviceProperty) === -1) {
        deviceProperties.push(deviceProperty);
      }
    });
  }
  
  $scope.deviceInfo = deviceInfo;
  $scope.deviceProperties = deviceProperties;
}
  
function parseDevices(dataArray, dataKey) {
     var deviceInfo = [];
     if(angular.isArray(dataArray)) {
       for(var i = 0; i < dataArray.length; i++) {
         var data = dataArray[i];
         if(data.hasOwnProperty('manufacturer') || data.hasOwnProperty('model')) {
           data[headerProperty] = dataKey;
           deviceInfo.push(data);
         } else {
            angular.forEach(data, function(devices, deviceKey) {
              if(angular.isArray(devices)) {
                 deviceInfo = deviceInfo.concat(parseDevices(devices, deviceKey));
              }
            });
         }
       }
     }
    
     return deviceInfo;
}
  
});
<!DOCTYPE html>
<html ng-app="studentApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script  src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>

<body ng-controller="StudentCntrl">

 
    <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Property</th>
              <th ng-repeat="device in deviceInfo track by $index">{{device[headerProperty]}}</th>
            </tr>
          </thead>
          <tbody>
             <tr ng-repeat="prop in deviceProperties track by $index" ng-if="prop != headerProperty">
                <td>{{prop}}</td>
                <td ng-repeat="device in deviceInfo track by $index">{{device[prop]}}</td>
             </tr>
          </tbody>
        </table>
      </div>
</body>
</html>

share|improve this answer
    
Thanks Aruna !! is there a way we can achieve this using setRows() and setHeaders() .. Upvoted :) – Batman Nov 29 '16 at 14:29
    
@Batman, Sorry, can you please explain me what it means using setRows() and setHeaders() since the code has this already. Within your $http code, you can just call setData(response.data)` and that's it. Please explain me – Aruna Nov 29 '16 at 14:33
    
@cale_b I thought he has tried with few ng-repeat inside the html in the Demo url, https://plnkr.co/edit/tT2ltDz2TquKHjIE8OKD?p=preview – Aruna Nov 29 '16 at 14:35
    
@cale_b I am not asking to write code here . I am asking to help with Approach – Batman Nov 29 '16 at 14:36
1  
@Batman Usually, headers and number of columns will be static and row count will be dynamic. But for this case, headers and number of columns are dynamic and row count is static. That's why we have to rebuild the object. What I can do is, instead of two methods, I can try to reduce as one method. – Aruna Nov 29 '16 at 14:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.