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

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

Is having async as false really detrimental?

Retrieve distinct keys from a JSON file in Node.js

Cloudflare SSL Error 522 Express: Troubleshooting Tips for Res

AngularJS - Oops! Looks like we encountered an error: [$injector:modulerr]

Determining the Testing Status of a Node Package Management (NPM) Package

Common mistakes made while working with decorators in Visual Studio Code

What is the proper way to execute a JavaScript function within a JavaScript file from an HTML file?

How to import a dynamic typescript file in Next JS

Floating action button within a collapsible panel

Ways to update the component's state externally

Whenever I try to import a directory that contains modules, Webpack encounters an error

What is the process for configuring VSCode for C/C++ development on a Mac using Clang or GCC compilers?

Decode a JavaScript string without the need to save it as a file

Retrieve the external JSON file using AngularJS

Load the React component asynchronously while waiting for the data to be fetched

What is the best way to deactivate div elements once an overlay has been applied to them?

Exploring the possibilities of integrating the iTunes Store customer reviews API

What is the proper way to reference a property's value within another property of the same JavaScript Object?

Is it possible to utilize rspec for conducting feature testing on an integrated rails-angular application?