The arrangement of a JSON array can be modified by AngularJS' Ng-repeat functionality

Question

The arrangement of a JSON array can be modified by AngularJS' Ng-repeat functionality

Hello everyone at SO:

On March 18, 2014, I encountered a situation while trying to use ng-repeat. The elements inside the array, retrieved from a Json string, seem to be changing their original order.

To clarify, the initial variables in the array pertain to order_id and person name, whereas the later ones relate to credit information.

The information seems to be jumbled up, perhaps sorted alphabetically, although I cannot be certain.

There doesn't appear to be anything unusual in the code:

<li ng-repeat="(variable, value) in records" >
     <a href="">{{variable}}: </a>
     <a href="">{{value}}</a>
</li>

Any suggestions or references?

Thank you in advance! Chris;

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

chris: In the recent release of Angular 1.4, the issue with sorting keys alphabetically has been resolved. According to the official Angular documentation:

Version 1.4 no longer sorts keys alphabetically. The order is now based on the browser's return when using for key in myObj

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

chris: In the recent release of Angular 1.4, the issue with sorting keys alphabetically has been resolved. According to the official Angular documentation:

Version 1.4 no longer sorts keys alphabetically. The order is now based on the browser's return when using for key in myObj

https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 3

Answer №2

To achieve this, you can utilize the orderBy filter. Below is an illustration:

Assume you have a controller structured as follows:

function Controller($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:19},
       {name:'Mary', phone:'555-9876', age:10},
       {name:'Mike', phone:'555-4321', age:21},
       {name:'Adam', phone:'555-5678', age:35},
       {name:'Julie', phone:'555-8765', age:29}]
  $scope.predicate = '-age';
}

In your HTML:

<div ng-controller="Controller">
    <table class="friend">
      <tr>
        <th>Name
        <th>Phone Number</th>
        <th>Age</th>
      </tr>
      <tr ng-repeat="friend in friends | orderBy:predicate">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
        <td>{{friend.age}}</td>
      </tr>
    </table>
  </div>

The output will be:

Name    Phone Number    Age
Adam    555-5678        35
Julie   555-8765        29
Mike    555-4321        21
John    555-1212        19
Mary    555-9876        10

This should address your concern effectively.

If you want to sort by age in ascending order, modify this line in your controller:

$scope.predicate = '+age';

Answer 4

To achieve this, you can utilize the orderBy filter. Below is an illustration:

Assume you have a controller structured as follows:

function Controller($scope) {
  $scope.friends =
      [{name:'John', phone:'555-1212', age:19},
       {name:'Mary', phone:'555-9876', age:10},
       {name:'Mike', phone:'555-4321', age:21},
       {name:'Adam', phone:'555-5678', age:35},
       {name:'Julie', phone:'555-8765', age:29}]
  $scope.predicate = '-age';
}

In your HTML:

<div ng-controller="Controller">
    <table class="friend">
      <tr>
        <th>Name
        <th>Phone Number</th>
        <th>Age</th>
      </tr>
      <tr ng-repeat="friend in friends | orderBy:predicate">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
        <td>{{friend.age}}</td>
      </tr>
    </table>
  </div>

The output will be:

Name    Phone Number    Age
Adam    555-5678        35
Julie   555-8765        29
Mike    555-4321        21
John    555-1212        19
Mary    555-9876        10

This should address your concern effectively.

If you want to sort by age in ascending order, modify this line in your controller:

$scope.predicate = '+age';

The arrangement of a JSON array can be modified by AngularJS' Ng-repeat functionality

Answer №1

Answer №2

Similar questions

When using Codeigniter with AJAX dropdown menus, some issues may arise if form validation fails and the view gets redirected or reloaded

Could not load ngx-restangular due to an error: (SystemJS) Module not yet loaded while trying to load "@angular/core"

Angular routes do not populate the $state in resolving promises

Express app: the ideal location to implement a closed-loop temperature control system

JavaScript method to prevent users from entering numbers as the first two characters, with all subsequent characters being numbers only

Enhancing ASP.NET MVC 5 Application with jQuery Validate: Implementing Submit Button Click Events

Is it more advantageous in Vue to pre-process and save data directly to the data property, or to utilize computed properties?

Navigating through Index in #each in emberjs

Updating characters in a char array

Retrieve information in JSON format from a document

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

Building a DataFrame from JSON data using danfo-js, mongoDB, and mongoose on a Windows 10 platform: A guide

Update the data table after a new file has been uploaded

Transferring values from jQuery AJAX to Node.js

Adjusting Headers Using Buttons

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

Tips for nesting maps in React without causing redundant renders

Ways to retrieve directory information in Next.js hosted on Netlify

Inquiring about the integration of CodeIgniter with Javascript and AJAX