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 0 down vote favorite

From a web service I am getting a JSON string. It may vary based on the request. 2 JSON result are

Result 1

[
  {
    "Key": 1,
    "ID": 1,
    "applicationId": "1",
    "applicationName": "APP1"
  },
  {
    "Key": 2,
    "ID": 1,
    "applicationId": "2",
    "applicationName": "APP2"
  }
]

Result 2

[
  {
    "OrgKey": 1,
    "ID": 1,
    "OrgID": "1",
    "OrgName": "Org1"
  },
  {
    "OrgKey": 2,
    "ID": 4,
    "OrgID": "6",
    "OrgName": "Org2"
  }
]

How will I display this in a table?

In controller js file I use the $http.get method and in Success method I put

$scope.resultData = data;

But in HTML how I will display the dynamic contents?

<table>
<thead>
  <tr>
    <th ng-repeat = "result in resultData">
     <!-- Not the right way -->
     <!-- Here I want to put the headers like "Key,ID" ... -->
    </th>
   </tr> </thead>
  <tbody>
  <tr ng-repeat = ""result in resultData">
   <td> {{result.Key }} </td>
   <!-- When the firlds vary, how to put? ->
  </tr>
  </tbody>
</table>

Is it possible? If so How? Thanks.

share|improve this question
    
see this answer, it might help you: stackoverflow.com/questions/18357370/… –  Maxim Shoustin Apr 5 '14 at 7:27
    
Based on docs.angularjs.org/api/ng/service/$http, be sure that you implement $http.get by right way (async call). Otherwise, HTML will show nothing. –  Maxim Shoustin Apr 5 '14 at 7:30
    
But there the JSON format is same. –  iCode Apr 5 '14 at 7:30
    
in my response I posted 2nd example with dynamic table –  Maxim Shoustin Apr 5 '14 at 7:30

1 Answer 1

up vote 4 down vote accepted

first of all you should get first row to set your table's header like this

<thead>
  <tr>
    <th ng-repeat="(header, value) in resultData[0]">
      {{header}}
    </th>
  </tr>
</thead>

after this for your tbody you should get your rows first then inside the row travel all cells,

<tbody>
  <tr ng-repeat="row in resultData">
    <td ng-repeat="cell in row">
      {{cell}}
    </td>
  </tr>
</tbody>

here is working PLUNKER...

UPDATE

some users asked for if this can be handle without sorting headers and their values...

the answers is yes but before starting you should know why it is already sorted alphabetacally...

angular ng-repeat directive works differentlly with arrays and objects... If you use array you can make it sortable but this is not an option for objects here is a discussion about it...

so right now best way is pushing object values into array before we use them in ng-repeat..

here is second PlUNKER

NOTE : You will see I remove $$hashKey from array, because they are not a property of original element, angular add them into object automatically to watch changes

share|improve this answer
    
hi. i just wanted to know if this can be done without the sorting of the rows! Right now the table headers are being sorted alphabetically –  RogerFederer Aug 18 '14 at 13:56
1  
@crozzfire PLUNKER –  wickY26 Aug 18 '14 at 16:59
    
@crozzfire you can check update section for more information... –  wickY26 Aug 18 '14 at 17:09
    
thank you for the information and the plunker –  RogerFederer Aug 18 '14 at 17:12

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.