Displaying dynamic JSON array using AngularJS

Question

Hi I have an AngularJS application. I am connecting to server and getting some JSON array data. It is dynamic data and I am not sure how the content is.

I want to display it as a table. This is how my JSON looks like.

RESPONSE 1

{
  "success": true,
  "statusMessage": null,
  "responseObject": {
    "sourceContent": {
      "Classification": [
        "New Feature",
        "Bug",
        "Bug",
        "Improvement",
        "Improvement"
      ],
      "CriticalityCode": [
        "2",
        "1",
        "4",
        "6",
        "9"
      ],
      "Title": [
        "TITLE1",
        "TITLE2",
        "TITLE3",
        "TITLE4",
        "TITLE5"
      ],
      "Description": [
        "Description 1",
        "Description 2",
        "Description 3",
        "Description 4",
        "Description 5"
      ],
      "Priority": [
        "Major",
        "Major",
        "Critical",
        "Critical",
        "Major"
      ],
      "Type": [
        "type 1",
        "type 2",
        "type 3",
        "type 4",
        "type 5"
      ],
      "Date": [
        "2014-01-06T11:30:10.000+0000",
        "2013-12-30T11:14:27.000+0000",
        "2013-12-09T10:21:09.000+0000",
        "2013-12-05T08:12:07.000+0000",
        "2013-12-05T08:05:46.000+0000"
      ]
    }
  }
}

RESPONSE 2

{
  "success": true,
  "statusMessage": null,
  "responseObject": {
    "sourceContent": {
      "Requirements": [
        "Requirements 1",
        "Requirements 2",
        "Requirements 3",
        "Requirements 4"
      ],
      "Req Key": [
        "2",
        "1",
        "6",
        "9"
      ],
      "Description": [
        "Description 1",
        "Description 2",
        "Description 3",
        "Description 4"
      ],
      "Type": [
        "type 1",
        "type 2",
        "type 3",
        "type 4"
      ],
      "Date": [
        "2013-12-30T11:14:27.000+0000",
        "2013-12-09T10:21:09.000+0000",
        "2013-12-05T08:12:07.000+0000",
        "2013-12-05T08:05:46.000+0000"
      ]
    }
  }
}

JS Code.

$scope.sourceContent= $scope.response.responseObject.sourceContent;

I don't know how put the table contents. This is my HTML

<table class="table-bordered" style="margin-bottom: 0;">
              <tr>
                  <th class="border" ng-repeat="(header, value) in sourceContent">{{header}}</th>
              </tr>
              <tr>
                  <td class="border" >
                      {{sourceContent.Classification[0]}}
                  </td>
              </tr>
    </table>

I am able to set the table column headers. But how to set contents?

JSFiddle Link

Answer 1

I don't know whether you control the source of the response, or you might have to process the response after you receive it, from:

{
  Requirements: [],
  Description: []
}

to

[
  {Requirements: '', Description: ''},
  {Requirements: '', Description: ''},
  { ... }
]

at which point you can use ngRepeat to populate your table easily.

For some sample code to convert the first to the second:

var responseArray = [];
for (var key in response) {
  var keyArray = response[key];
  for (var i = 0; i < keyArray.length; i++) {
      if (responseArray.length - 1 < i) {
        var obj = {};
        obj[key] = keyArray[i];
        responseArray.push(obj);
      } else {
        var responseElement = responseArray[i];
        responseElement[key] = keyArray[i];
      }
  }
}

I haven't tested the above code (wrote it in the SO editor ;) ), but I hope this gives an idea how to implement the transition.