ng-repeat is not printing based on the order of the json object

Question

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"

Do you want you output to be like INC0039473 Company Level 1 — Ajinkya Dhote, Mar 27 '19 at 11:07
@IsraGab its not alphabetic if i add more headers they are in a random order — Shay Young, Mar 27 '19 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 — Shay Young, Mar 27 '19 at 11:22
Possible duplicate of [Ordered JSONObject](https://stackoverflow.com/questions/6993645/ordered-jsonobject) — IsraGab, Mar 27 '19 at 14:01

IsraGab · Answer 1 · 2019-03-27T14:00:01.093

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.

edited Mar 27 '19 at 14:00

answered Mar 27 '19 at 11:21

IsraGab

4,819
3
27
46

when i add other columns it comes out in this order Assignment group Number Short description Created – Shay Young Mar 27 '19 at 11:26
Look at this fiddle you will see it's alphabetic order: https://jsfiddle.net/mphy59d8/2/ – IsraGab Mar 27 '19 at 13:56

score 1 · Answer 2 · answered Mar 27 '19 at 11:24

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>

ng-repeat is not printing based on the order of the json object

Assignment group | Number | Short description | Created

2 Answers2