How to change order of object (not array) in angular js
I have one set of objects (a pair of key values)
var data = {
"AnomalyEnableLatch": "false",
"DistLogPeriod": "0",
"AedCooldown": "0",
"AedEnableLatch": "false",
"AedGuardBand": "0",
"AedSensitivity": "0",
"AedWindowSize": "0",
"AnomalyCurrentNoiseFloor": "10",
"AnomalyGuardBandSize": "32",
"AnomalyKsigToStart": "40",
"AnomalyMinSnrToStop": "100",
"AnomalyWindowSize": "651"
};
This list will be dynamic.
I need to order by two parameters
one starts with aed and the other set starts with anomaly .
Actually, I am getting the correct order from the api response. While working on js, the order is changed automatically using asc.
You shouldn't do that. I need to complete work on an actual order.
Otherwise, I need to change the order. I need the order listed in the above set
source to share
Actually, the order does not change. But the console will look like this.
Just watch console.log(Object.keys(data))
before using the filter. It's just an unordered array of object properties. Now if you want to sort alphabetically, then
you can use Object.keys () and sort the array and then iterate through the object.
Object.keys(data)
.sort() // sort keys alphabetically
.forEach(function(v, i) {
console.log(v, data[v]); // access properties(keys) alphabetically
});
source to share
As noted, you cannot sort / order keys in an object. But you can order a way to access the keys.
You can use the following JSFiddle to debug or execute SO snippet.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.data = {
"AnomalyEnableLatch": "false",
"DistLogPeriod": "0",
"AedCooldown": "0",
"AedEnableLatch": "false",
"AedGuardBand": "0",
"AedSensitivity": "0",
"AedWindowSize": "0",
"AnomalyCurrentNoiseFloor": "10",
"AnomalyGuardBandSize": "32",
"AnomalyKsigToStart": "40",
"AnomalyMinSnrToStop": "100",
"AnomalyWindowSize": "651"
};
$scope.keys = Object.keys($scope.data);
$scope.keys.sort(function(a, b) {
return getDifference(a, b, "Aed") || getDifference(a, b, "Anomal") || a.localeCompare(b)
});
function getDifference(a, b, s) {
return b.startsWith(s) - a.startsWith(s)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app>
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div>
<ul>
<li ng-repeat="k in keys">
{{k}} : {{ data[k] }}</li>
</ul>
</div>
</div>
</div>
source to share
The order of keys in a JavaScript object is not guaranteed. There are two possible ways to approach this:
- The keys and their order are known before: In this case, predefine your array of keys and use
Array.prototype.map
to create an ordered array from your data card. - If keys are dynamic too, use
Object.keys
to retrieve keys, sort them as needed withArray.prototype.sort(compareFn)
. Then you can use this sorted array of keys as described in method 1
Example code for getting an ordered array from a map with a given ordered set of keys:
var data = {...}; //Original data map
var orderedKeys = ["firstKey", "secondKey"]; //Array of preordered keys
var sortedArrayOfMaps = orderedKeys.map(function(key){var o={}; o[key]=data[key]; return o;}) //Use map to get ordered array of objects
I have also updated the JS Fiddle using this method for your reference
source to share