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.