DevExtreme Angular - Query Methods
aggregate(seed, step, finalize)
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var step = function (total, itemData) { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; }; var finalize = function (total) { // "total" is the resulting accumulator value return total / 1000; }; DevExpress.data.query([10, 20, 30, 40, 50]) .aggregate(0, step, finalize) .done(function (result) { console.log(result); // outputs 0.15 });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let step = (total, itemData) => { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; }; let finalize = total => { // "total" is the resulting accumulator value return total / 1000; }; Query([10, 20, 30, 40, 50]) .aggregate(0, step, finalize) .then(result => { console.log(result); // outputs 0.15 }); }; }
Vue
<script> import Query from 'devextreme/data/query'; const step = (total, itemData) => { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; } const finalize = total => { // "total" is the resulting accumulator value return total / 1000; } export default { mounted() { Query([10, 20, 30, 40, 50]) .aggregate(0, step, finalize) .then(result => { console.log(result); // outputs 0.15 }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const step = (total, itemData) => { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; } const finalize = total => { // "total" is the resulting accumulator value return total / 1000; } class App extends React.Component { constructor(props) { super(props); Query([10, 20, 30, 40, 50]) .aggregate(0, step, finalize) .then(result => { console.log(result); // outputs 0.15 }); } } export default App;
aggregate(step)
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
This is a shortcut for the aggregate(seed, step, finalize) method. It omits the seed and finalize parameters: instead of the seed value, the accumulator value is initialized with the first item's value; the finalize parameter's omission means that the calculation result is the accumulator value after the last step function's execution.
jQuery
var step = function (total, itemData) { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; }; DevExpress.data.query([10, 20, 30, 40, 50]) .aggregate(step) .done(function (result) { console.log(result); // outputs 150 });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let step = (total, itemData) => { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; }; Query([10, 20, 30, 40, 50]) .aggregate(step) .then(result => { console.log(result); // outputs 150 }); }; }
Vue
<script> import Query from 'devextreme/data/query'; const step = (total, itemData) => { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; } export default { mounted() { Query([10, 20, 30, 40, 50]) .aggregate(step) .then(result => { console.log(result); // outputs 150 }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const step = (total, itemData) => { // "total" is an accumulator value that should be changed on each iteration // "itemData" is the item to which the function is being applied return total + itemData; } class App extends React.Component { constructor(props) { super(props); Query([10, 20, 30, 40, 50]) .aggregate(step) .then(result => { console.log(result); // outputs 150 }); } } export default App;
avg()
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
First, call the select(getter) method to select the object field that provides numeric values if the Query is associated with an array of objects, or use the avg(getter) method instead of avg().
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .select("price") .avg() .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .select("price") .avg() .then(result => { // "result" contains the calculated value }); }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; export default { mounted() { Query(dataObjects) .select('price') .avg() .then(result => { // "result" contains the calculated value }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; class App extends React.Component { constructor(props) { super(props); Query(dataObjects) .select('price') .avg() .then(result => { // "result" contains the calculated value }); } } export default App;
avg(getter)
Calculates the average of all values found using a getter.
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .avg("price") .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .avg("price") .then(result => { // "result" contains the calculated value }); }; }
If the Query is associated with a numeric array, use the avg() method instead.
count()
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
DevExpress.data.query([10, 20, 30, 40, 50]) .count() .done(function (result) { console.log(result); // outputs 5 });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { Query([10, 20, 30, 40, 50]) .count() .then(result => { console.log(result); // outputs 5 }); }; }
Vue
<script> import Query from 'devextreme/data/query'; export default { mounted() { Query([10, 20, 30, 40, 50]) .count() .then(result => { console.log(result); // outputs 5 }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; class App extends React.Component { constructor(props) { super(props); Query([10, 20, 30, 40, 50]) .count() .then(result => { console.log(result); // outputs 5 }); } } export default App;
enumerate()
Executes the Query. This is an asynchronous alternative to the toArray() method.
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
DevExpress.data.query("http://mydomain.com/MyDataService", queryOptions) .enumerate() .done(function (result) { // "result" contains the obtained array });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { Query("http://mydomain.com/MyDataService", queryOptions) .enumerate() .then(result => { // "result" contains the obtained array }); }; }
Vue
<script> import Query from 'devextreme/data/query'; export default { mounted() { Query('http://mydomain.com/MyDataService', queryOptions) .enumerate() .then(result => { // "result" contains the obtained array }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; class App extends React.Component { constructor(props) { super(props); Query('http://mydomain.com/MyDataService', queryOptions) .enumerate() .then(result => { // "result" contains the obtained array }); } } export default App;
filter(criteria)
jQuery
var dataObjects = [ ... ]; var filteredData = DevExpress.data.query(dataObjects) .filter(["price", "<", 500]) // or // .filter("price", "<", 500) .toArray();
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; let filteredData = Query(dataObjects) .filter(["price", "<", 500]) // or // .filter("price", "<", 500) .toArray(); }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; export default { mounted() { this.filteredData = Query(dataObjects) .filter(['price', '<', 500]) // or // .filter('price', '<', 500) .toArray(); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; class App extends React.Component { constructor(props) { super(props); this.filteredData = Query(dataObjects) .filter(['price', '<', 500]) // or // .filter('price', '<', 500) .toArray(); } } export default App;
filter(predicate)
jQuery
var filteredData = DevExpress.data.query([10, 20, 40, 50, 30]) .filter(function (dataItem) { return dataItem < 25; }) .toArray(); console.log(filteredData); // outputs [10, 20]
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let filteredData = Query([10, 20, 40, 50, 30]) .filter(dataItem => dataItem < 25) .toArray(); console.log(filteredData); // outputs [10, 20] }; }
Vue
<script> import Query from 'devextreme/data/query'; export default { mounted() { this.filteredData = Query([10, 20, 40, 50, 30]) .filter(dataItem => dataItem < 25) .toArray(); console.log(this.filteredData); // outputs [10, 20] }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; class App extends React.Component { constructor(props) { super(props); this.filteredData = Query([10, 20, 40, 50, 30]) .filter(dataItem => dataItem < 25) .toArray(); console.log(this.filteredData); // outputs [10, 20] } } export default App;
See Also
groupBy(getter)
Groups data items by the specified getter.
jQuery
var dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; var groupedData = DevExpress.data.query(dataObjects) .groupBy("gender") .toArray(); console.log(groupedData); /* outputs [{ key: "female", items: [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] }, { key: "male", items: [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] }] */
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; let groupedData = Query(dataObjects) .groupBy("gender") .toArray(); console.log(groupedData); /* outputs [{ key: "female", items: [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] }, { key: "male", items: [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] }] */ }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; export default { mounted() { this.groupedData = Query(dataObjects) .groupBy('gender') .toArray(); console.log(this.groupedData); /* outputs [{ key: "female", items: [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] }, { key: "male", items: [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] }] */ }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; class App extends React.Component { constructor(props) { super(props); this.groupedData = Query(dataObjects) .groupBy('gender') .toArray(); console.log(this.groupedData); /* outputs [{ key: "female", items: [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] }, { key: "male", items: [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] }] */ } } export default App;
See Also
max()
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
First, call the select(getter) method to select the object field that provides numeric values if the Query is associated with an array of objects, or use the max(getter) method instead of max().
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .select("price") .max() .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .select("price") .max() .then(result => { // "result" contains the calculated value }); }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; export default { mounted() { Query(dataObjects) .select('price') .max() .then(result => { // "result" contains the calculated value }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; class App extends React.Component { constructor(props) { super(props); Query(dataObjects) .select('price') .max() .then(result => { // "result" contains the calculated value }); } } export default App;
max(getter)
Calculates the maximum of all values found using a getter.
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .max("price") .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .max("price") .then(result => { // "result" contains the calculated value }); }; }
If the Query is associated with a numeric array, use the max() method instead.
min()
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
First, call the select(getter) method to select the object field that provides numeric values if the Query is associated with an array of objects, or use the min(getter) method instead of min().
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .select("price") .min() .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .select("price") .min() .then(result => { // "result" contains the calculated value }); }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; export default { mounted() { Query(dataObjects) .select('price') .min() .then(result => { // "result" contains the calculated value }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; class App extends React.Component { constructor(props) { super(props); Query(dataObjects) .select('price') .min() .then(result => { // "result" contains the calculated value }); } } export default App;
min(getter)
Calculates the minumum of all values found using a getter.
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .min("price") .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .min("price") .then(result => { // "result" contains the calculated value }); }; }
If the Query is associated with a numeric array, use the min() method instead.
select(getter)
jQuery
var dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; var selectedData = DevExpress.data.query(dataObjects) .select("birthYear", "name") .toArray(); console.log(selectedData); /* outputs [ { birthYear: 1991, name: "Amelia" }, { birthYear: 1983, name: "Benjamin" }, { birthYear: 1987, name: "Daniela" }, { birthYear: 1981, name: "Lee" } ] */
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; let selectedData = Query(dataObjects) .select("birthYear", "name") .toArray(); console.log(selectedData); /* outputs [ { birthYear: 1991, name: "Amelia" }, { birthYear: 1983, name: "Benjamin" }, { birthYear: 1987, name: "Daniela" }, { birthYear: 1981, name: "Lee" } ] */ }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; export default { mounted() { this.selectedData = Query(dataObjects) .select('birthYear', 'name') .toArray(); console.log(this.selectedData); /* outputs [ { birthYear: 1991, name: "Amelia" }, { birthYear: 1983, name: "Benjamin" }, { birthYear: 1987, name: "Daniela" }, { birthYear: 1981, name: "Lee" } ] */ }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; class App extends React.Component { constructor(props) { super(props); this.selectedData = Query(dataObjects) .select('birthYear', 'name') .toArray(); console.log(this.selectedData); /* outputs [ { birthYear: 1991, name: "Amelia" }, { birthYear: 1983, name: "Benjamin" }, { birthYear: 1987, name: "Daniela" }, { birthYear: 1981, name: "Lee" } ] */ } } export default App;
slice(skip, take)
jQuery
var dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; var subset = DevExpress.data.query(dataObjects) .slice(1, 2) .toArray(); console.log(subset); /* outputs [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] */
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; let subset = Query(dataObjects) .slice(1, 2) .toArray(); console.log(subset); /* outputs [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] */ }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; export default { mounted() { this.subset = Query(dataObjects) .slice(1, 2) .toArray(); console.log(this.subset); /* outputs [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] */ }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; class App extends React.Component { constructor(props) { super(props); this.subset = Query(dataObjects) .slice(1, 2) .toArray(); console.log(this.subset); /* outputs [ { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" } ] */ } } export default App;
sortBy(getter)
Sorts data items by the specified getter in ascending order.
jQuery
var dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; var sortedData = DevExpress.data.query(dataObjects) .sortBy("birthYear") .toArray(); console.log(sortedData); /* outputs [ { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" } ] */
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; let sortedData = Query(dataObjects) .sortBy("birthYear") .toArray(); console.log(sortedData); /* outputs [ { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" } ] */ }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; export default { mounted() { this.sortedData = Query(dataObjects) .sortBy('birthYear') .toArray(); console.log(this.sortedData); /* outputs [ { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" } ] */ }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; class App extends React.Component { constructor(props) { super(props); this.sortedData = Query(dataObjects) .sortBy('birthYear') .toArray(); console.log(this.sortedData); /* outputs [ { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" } ] */ } } export default App;
To sort data items by one more getter, call the thenBy(getter) or thenBy(getter, desc) method after sortBy.
See Also
sortBy(getter, desc)
Sorts data items by the specified getter in the specified sorting order.
jQuery
var dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; var sortedData = DevExpress.data.query(dataObjects) .sortBy("birthYear", true) .toArray(); console.log(sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; let sortedData = Query(dataObjects) .sortBy("birthYear", true) .toArray(); console.log(sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */ }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; export default { mounted() { this.sortedData = Query(dataObjects) .sortBy('birthYear', true) .toArray(); console.log(this.sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */ }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; class App extends React.Component { constructor(props) { super(props); this.sortedData = Query(dataObjects) .sortBy('birthYear', true) .toArray(); console.log(this.sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */ } } export default App;
Call the thenBy(getter) or thenBy(getter, desc) method after sortBy to sort data items by one more getter.
See Also
sum()
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
First, call the select(getter) method to select the object field that provides numeric values if the Query is associated with an array of objects, or use the sum(getter) method instead of sum().
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .select("price") .sum() .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .select("price") .sum() .then(result => { // "result" contains the calculated value }); }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; export default { mounted() { Query(dataObjects) .select('price') .sum() .then(result => { // "result" contains the calculated value }); }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ ... ]; class App extends React.Component { constructor(props) { super(props); Query(dataObjects) .select('price') .sum() .then(result => { // "result" contains the calculated value }); } } export default App;
sum(getter)
Calculates the sum of all values found using a getter.
A Promise that is resolved after the operation is completed. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var dataObjects = [ ... ]; DevExpress.data.query(dataObjects) .sum("price") .done(function (result) { // "result" contains the calculated value });
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ ... ]; Query(dataObjects) .sum("price") .then(result => { // "result" contains the calculated value }); }; }
If the Query is associated with a numeric array, use the sum() method instead.
thenBy(getter)
Sorts data items by one more getter in ascending order.
This method can only follow the sortBy(getter), sortBy(getter, desc), thenBy(getter, desc), or another thenBy(getter) method call.
jQuery
var dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; var sortedData = DevExpress.data.query(dataObjects) .sortBy("gender") .thenBy("birthYear") .toArray(); console.log(sortedData); /* outputs [ { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" } ] */
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; let sortedData = Query(dataObjects) .sortBy("gender") .thenBy("birthYear") .toArray(); console.log(sortedData); /* outputs [ { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" } ] */ }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; export default { mounted() { this.sortedData = Query(dataObjects) .sortBy('gender') .thenBy('birthYear') .toArray(); console.log(this.sortedData); /* outputs [ { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" } ] */ }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; class App extends React.Component { constructor(props) { super(props); this.sortedData = Query(dataObjects) .sortBy('gender') .thenBy('birthYear') .toArray(); console.log(this.sortedData); /* outputs [ { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" }, { name: "Benjamin", birthYear: 1983, gender: "male" } ] */ } } export default App;
See Also
thenBy(getter, desc)
Sorts data items by one more getter in the specified sorting order.
This method can only follow the sortBy(getter), sortBy(getter, desc), thenBy(getter), or another thenBy(getter, desc) method call.
jQuery
var dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; var sortedData = DevExpress.data.query(dataObjects) .sortBy("gender") .thenBy("birthYear", true) .toArray(); console.log(sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let dataObjects = [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Lee", birthYear: 1981, gender: "male" } ]; let sortedData = Query(dataObjects) .sortBy("gender") .thenBy("birthYear", true) .toArray(); console.log(sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */ }; }
Vue
<script> import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; export default { mounted() { this.sortedData = Query(dataObjects) .sortBy('gender') .thenBy('birthYear', true) .toArray(); console.log(this.sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */ }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; const dataObjects = [ { name: 'Amelia', birthYear: 1991, gender: 'female' }, { name: 'Benjamin', birthYear: 1983, gender: 'male' }, { name: 'Daniela', birthYear: 1987, gender: 'female' }, { name: 'Lee', birthYear: 1981, gender: 'male' } ]; class App extends React.Component { constructor(props) { super(props); this.sortedData = Query(dataObjects) .sortBy('gender') .thenBy('birthYear', true) .toArray(); console.log(this.sortedData); /* outputs [ { name: "Amelia", birthYear: 1991, gender: "female" }, { name: "Daniela", birthYear: 1987, gender: "female" }, { name: "Benjamin", birthYear: 1983, gender: "male" }, { name: "Lee", birthYear: 1981, gender: "male" } ] */ } } export default App;
See Also
toArray()
Gets data items associated with the Query. This is a synchronous alternative to the enumerate() method.
Array<any>
jQuery
var data = DevExpress.data.query([10, 20, 50, 40, 30]) .sortBy() .toArray(); console.log(data); // outputs [10, 20, 30, 40, 50]
Angular
import Query from "devextreme/data/query"; // ... export class AppComponent { constructor () { let data = Query([10, 20, 50, 40, 30]) .sortBy() .toArray(); console.log(data); // outputs [10, 20, 30, 40, 50] }; }
Vue
<script> import Query from 'devextreme/data/query'; export default { mounted() { this.data = Query([10, 20, 50, 40, 30]) .sortBy() .toArray(); console.log(this.data); // outputs [10, 20, 30, 40, 50] }, // ... } </script>
React
// ... import Query from 'devextreme/data/query'; class App extends React.Component { constructor(props) { super(props); this.data = Query([10, 20, 50, 40, 30]) .sortBy() .toArray(); console.log(this.data); // outputs [10, 20, 30, 40, 50] } } export default App;
If you have technical questions, please create a support ticket in the DevExpress Support Center.