2017-02-09 6 views
0

Ich versuche diese Daten zu sortieren.Benutzerdefinierte Sortierung basierend auf Stringlänge

Meine Daten sieht wie folgt aus:

var test = [ 
      {label: '41_45', 
      value :14}, 
      {label: '46_50', 
      value :34}, 
      {label: '1', 
      value :44}, 
      {label: '10_15', 
      value :84} 
      {label: '3', 
      value :44}, 
      {label: '6_10', 
      value :94}, 
      {label: '16_20', 
      value :74}, 
      {label: '21_25', 
      value :64}, 
      {label: '26_30', 
      value :44}, 
      {label: '31_35', 
      {label: '4', 
      value :44}, 
      {label: '5', 
      value :24}, 
      {label: '36_40', 
      value :444}, 
      {label: '>50', 
      value :24}, 
      {label: '2', 
      value :44} 
     ]; 

Aber ich will es sortieren, basierend auf dem Etikett, so dass ich Ergebnisse wie diese bekommen:

var test = [ 
      {label: '1', 
      value :44}, 
      {label: '2', 
      value :44}, 
      {label: '3', 
      value :44}, 
      {label: '4', 
      value :44}, 
      {label: '5', 
      value :24}, 
      {label: '6_10', 
      value :94}, 
      {label: '11_15', 
      value :84}, 
      {label: '16_20', 
      value :74}, 
      {label: '21_25', 
      value :64}, 
      {label: '26_30', 
      value :44}, 
      {label: '31_35', 
      value :4}, 
      {label: '36_40', 
      value :444}, 
      {label: '41_45', 
      value :14}, 
      {label: '46_50', 
      value :34}, 
      {label: '>50', 
      value :24} 
     ]; 

Gibt es eine Bibliothek oder Funktion, die ich kann das nutzen, um dies zu erreichen?

Antwort

1

Während dies könnte verwenden können mit dem Winkel erfolgen Filter (wie andere bereits erwähnt haben), kann es auch vor der View-Logik mit der JavaScript-Funktion array.sort() durchgeführt werden. sort() eine optionale Funktion compareFunction annehmen kann, dass die Elemente Sortier verarbeiten kann:

Wenn compareFunction zugeführt wird, werden die Feldelemente entsprechend der Rückgabewert der Funktion vergleichen, sortiert. Wenn a und b sind zwei Elemente, die verglichen werden, dann gilt:

  • Wenn compareFunction(a, b) kleiner als 0, sort a zu einem niedrigen Index als B, das heißt ein an erster Stelle.
  • Wenn compareFunction(a, b) den Wert 0 zurückgibt, lassen Sie a und b unverändert, aber in Bezug auf alle anderen Elemente sortiert. Hinweis: Der ECMAscript-Standard garantiert dieses Verhalten nicht, und daher berücksichtigen nicht alle Browser (z. B. Mozilla-Versionen, die mindestens bis 2003 zurückreichen) dies.
  • Wenn compareFunction(a, b) größer als 0 ist, sortieren Sie b zu einem niedrigeren Index als a.
  • compareFunction(a, b) muss immer denselben Wert zurückgeben, wenn ein bestimmtes Paar von Elementen a und b als zwei Argumente angegeben wird. Wenn inkonsistente Ergebnisse zurückgegeben werden, ist die Sortierreihenfolge nicht definiert. 1

Um das Label Eigentum der einzelnen Elemente zu vergleichen, die ein String ist, verwenden parseInt() eine ganze Zahl von den Saiten zu analysieren, wenn die Elemente zu vergleichen, wie in dem folgenden Code. Notice wird als das Radix (2 nd Argument) übergeben, um sicherzustellen, dass keine Strings versehentlich als Hex/Octal-Nummer analysiert werden.

var newArray = test.sort(function(item1, item2) { 
    if (parseInt(item1.label,10) < parseInt(item2.label,10)) { 
     return -1; //put item2 after item1 
    } 
    return 1; //otherwise put item1 after item2 
}); 

Sehen Sie eine Demonstration dieses unter (Run-Code-Snippet klicken, um die Ergebnisse zu sehen). Die bedingte Logik wurde unter Verwendung eines ternary operator vereinfacht.

var test = 
 
    [{ 
 
     label: '41_45', 
 
     value: 14 
 
    }, { 
 
     label: '46_50', 
 
     value: 34 
 
    }, { 
 
     label: '1', 
 
     value: 44 
 
    }, { 
 
     label: '10_15', 
 
     value: 84 
 
    }, { 
 
     label: '3', 
 
     value: 44 
 
    }, { 
 
     label: '6_10', 
 
     value: 94 
 
    }, { 
 
     label: '16_20', 
 
     value: 74 
 
    }, { 
 
     label: '21_25', 
 
     value: 64 
 
    }, { 
 
     label: '26_30', 
 
     value: 44 
 
    }, { 
 
     label: '31_35' 
 
    }, { 
 
     label: '4}', 
 
     value: 44 
 
    }, { 
 
     label: '5', 
 
     value: 24 
 
    }, { 
 
     label: '36_40', 
 
     value: 444 
 
    }, { 
 
     label: '>50', 
 
     value: 24 
 
    }, { 
 
     label: '2', 
 
     value: 44 
 
    }]; 
 
var newArray = test.sort(function(item1, item2) { 
 
    return (parseInt(item1.label,10) < parseInt(item2.label,10))?-1:1; 
 
    }); 
 
console.log(newArray);


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

0

Eine gute Option

var users = [ 
    { 'user': 'fred', 'age': 48 }, 
    { 'user': 'barney', 'age': 36 }, 
    { 'user': 'fred', 'age': 40 }, 
    { 'user': 'barney', 'age': 34 } 
]; 

_.sortBy(users, [function(o) { return o.user; }]); 
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] 

_.sortBy(users, ['user', 'age']); 
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]] 
0

zu verwenden ist, wenn Sie es in der Ansicht mit angular tun möchten, können Sie mit dem ng repeat Filter verwenden orderby,

Code:

<div ng-repeat="item in test | orderBy:'label' "> 
    <h1>{{item}}</h1> 
    </div> 

Wenn Sie es in Controller tun möchten, erhalten Sie $ Filter,

-Code

$scope.filtered = $filter('orderBy')($scope.test, 'label'); 

DEMO

var app = angular.module('app', []); 
 
app.controller('loginController', ['$scope','$filter', function($scope,$filter) { 
 
    $scope.test = 
 
    [{ 
 
     label: '41_45', 
 
     value: 14 
 
    }, { 
 
     label: '46_50', 
 
     value: 34 
 
    }, { 
 
     label: '1', 
 
     value: 44 
 
    }, { 
 
     label: '10_15', 
 
     value: 84 
 
    }, { 
 
     label: '3', 
 
     value: 44 
 
    }, { 
 
     label: '6_10', 
 
     value: 94 
 
    }, { 
 
     label: '16_20', 
 
     value: 74 
 
    }, { 
 
     label: '21_25', 
 
     value: 64 
 
    }, { 
 
     label: '26_30', 
 
     value: 44 
 
    }, { 
 
     label: '31_35' 
 
    }, { 
 
     label: '4}', 
 
     value: 44 
 
    }, { 
 
     label: '5', 
 
     value: 24 
 
    }, { 
 
     label: '36_40', 
 
     value: 444 
 
    }, { 
 
     label: '>50', 
 
     value: 24 
 
    }, { 
 
     label: '2', 
 
     value: 44 
 
    }]; 
 
    $scope.filtered = $filter('orderBy')($scope.test, 'label'); 
 
}]);
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
</head> 
 

 
<body ng-app="app" ng-controller="loginController"> 
 
    <div ng-repeat="item in filtered"> 
 
    <h1>{{item}}</h1> 
 
    </div> 
 
    <script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script> 
 
    <script type="text/javascript " src="MainViewController.js "></script> 
 
</body> 
 
</html>

+0

Das Problem ist, ich möchte 1, 2, 3, 4, 5 und 6-10, 11-15 so im Grunde basierend auf dem ersten Buchstaben (int) der Zeichenfolge zeigen – user3407267

0

realisierbare Lösung wird bereits von @Sajeetharan vorgeschlagen. Angular bietet Ihnen eine bessere Kontrolle über diese Daten, die sowohl effizient als auch sehr einfach zu implementieren sind.

können Sie Filter von angular js verwenden, um die Ausgabe in der Zeit zu erhalten.

<table> 
     <tr> 
      <td>label</td> 
      <td>value</td> 
     </tr> 
     <div ng-repeat="data in test | orderBy:'label' "> 
      <tr> 
      <td>data.label</td> 
      <td>data.value</td> 
      </tr> 
     </div> 
    <table> 
Verwandte Themen