current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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

share|improve this question
    
I would start by changing the structure of the JSON. Instead of having N parallel arrays of strings, I would have one array of objects (each object having a classification, a description, etc.) –  JB Nizet May 17 at 5:39

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
Thanks. This worked. I converted to the format using this code and then I used this answer stackoverflow.com/a/22878132/2189617 to display in Table –  iProgrammer May 17 at 6:09

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.