0

I have a table that is being printed in the incorrect order based on the JSON.

The table looks like below, i want it to be in the order of the JSON:

why does ng-repeat not print it as it finds it. This is being developed in the ServiceNow platform.

This data is completely dynamic, headers and data can change depending on the table that is chosen or what headers are picked.

Assignment group | Number | Short description | Created

Company Level 1 INC0039473 No access to email 01/02/2019 02:54:26

Company Level 2 INC0039474 This Incident is for SQL daily admin and pro-active checks. 01/02/2019 07:00:07

Company Level 2 INC0039475 Suspicious email 01/02/2019 07:14:05

Company Level 1 INC0039476 remove mailbox access 01/02/2019 07:30:51

Company Level 1 INC0039477 PDC - LogicMonitor - Server Offline 01/02/2019 08:25:56

Company Level 1 INC0039479 Unable to login to citrix 01/02/2019 08:44:21

HTML

<div ng-if="reportDetails.isList"> <table class="etable" > <tbody> <tr class="eborder"> <th ng-repeat="(key, data) in reportDetails.values[0]">{{key}}</th> </tr> <tr ng-repeat="(key, data) in reportDetails.values"> <td ng-repeat="rows in reportDetails.values[key]">{{rows}}</td> </tr> </tbody> </table> </div>

JSON DATA

"values":[ { "Number":"INC0039473", "Assignment group":"Company Level 1", "Created":"01/02/2019 02:54:26", "Short description":"No access to email" }, { "Number":"INC0039474", "Assignment group":"Company Level 2", "Created":"01/02/2019 07:00:07", "Short description":"This Incident is for SQL daily admin and pro-active checks." }, { "Number":"INC0039475", "Assignment group":"Company Level 2", "Created":"01/02/2019 07:14:05", "Short description":"Suspicious email" }, { "Number":"INC0039476", "Assignment group":"Company Level 1", "Created":"01/02/2019 07:30:51", "Short description":"remove mailbox access" }, { "Number":"INC0039477", "Assignment group":"Company Level 1", "Created":"01/02/2019 08:25:56", "Short description":"PDC - LogicMonitor - Server Offline"
Improve this question
6
  • Did you mean to tag with with AngularJS instead of Angular? Commented Mar 27, 2019 at 11:03
  • 2
    Do you want you output to be like INC0039473 Company Level 1 Commented Mar 27, 2019 at 11:07
  • Chrome change json to be displayed in alphabet order Commented Mar 27, 2019 at 11:18
  • @IsraGab its not alphabetic if i add more headers they are in a random order Commented Mar 27, 2019 at 11:21
  • @AjinkyaDhote yes order should be INC0039473 Company Level , but it should be what ever order the JSON is in Number, Assignment Group, Created On, Assigned To Commented Mar 27, 2019 at 11:22

2 Answers 2

Reset to default
1

You can try something like this. To render columns dynamically I will suggest processing your json to get the exact order in an array and use it or simply you can hardcode the column if that's not an issue for you

<div ng-if="reportDetails.isList"> <table class="etable" > <tbody> <tr class="eborder"> <th >Number</th> <th>Assignment group</th> </tr> <tr ng-repeat="(key, data) in reportDetails.values"> <td ng-repeat="rows in reportDetails.values[key]">{{rows.Number}}{{rows["Assignment group"]}}</td> </tr> </tbody> </table> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

It does.

But ng-repeat should be used to run over arrays, not over JSON.

When you write: 

 <th ng-repeat="(key, data) in reportDetails.values[0]">{{key}}</th>

reportDetails.values[0] is a JSON.

Because Assignement starts with a and Number with N, Assignement will be displayed first.

The solution would be to have separate array for metadata. Check for example here

Check this question (looks like yours). Answer also is a good work around.

Improve this answer

2 Comments

when i add other columns it comes out in this order Assignment group Number Short description Created
Look at this fiddle you will see it's alphabetic order: jsfiddle.net/mphy59d8/2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.