DevExtreme React - Query API

The Query is an object that provides a chainable interface for making data queries.

Type:

Object

To create a Query, call the query(array) or query(url, queryOptions) method, depending on the type of the storage you access. The Query supports method chaining. This enables you to execute several methods in a single statement.

jQuery
JavaScript
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 processedArray = DevExpress.data.query(dataObjects)
    .filter([ "gender", "=", "female" ])
    .sortBy("birthYear")
    .select("name", "birthYear")
    .toArray();
Angular
TypeScript
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 processedArray = Query(dataObjects)
            .filter([ "gender", "=", "female" ])
            .sortBy("birthYear")
            .select("name", "birthYear")
            .toArray();
    }
}
AngularJS
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        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" }
        ];

        $scope.processedArray = DevExpress.data.query(dataObjects)
            .filter([ "gender", "=", "female" ])
            .sortBy("birthYear")
            .select("name", "birthYear")
            .toArray();
    });
Knockout
JavaScript
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 viewModel = {
    processedArray: DevExpress.data.query(dataObjects)
        .filter([ "gender", "=", "female" ])
        .sortBy("birthYear")
        .select("name", "birthYear")
        .toArray()
};

ko.applyBindings(viewModel);
Vue
App.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.processedArray = Query(dataObjects)
            .filter([ 'gender', '=', 'female' ])
            .sortBy('birthYear')
            .select('name', 'birthYear')
            .toArray();
    },
    // ...
}
</script>
React
App.js
// ...
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.processedArray = Query(dataObjects)
            .filter([ 'gender', '=', 'female' ])
            .sortBy('birthYear')
            .select('name', 'birthYear')
            .toArray();
    }
}
export default App;
See Also

Methods

This section describes methods that perform operations on data associated with the Query.

Name Description
aggregate(seed, step, finalize)

Calculates a custom summary for all data items.
aggregate(step)

Calculates a custom summary for all data items.
avg()

Calculates the average of all values. Applies only to numeric arrays.
avg(getter)

Calculates the average of all values found using a getter.
count()

Calculates the number of data items.
enumerate()

Executes the Query. This is an asynchronous alternative to the toArray() method.
filter(criteria)

Filters data items using a filter expression.
filter(predicate)

Filters data items using a custom function.
groupBy(getter)

Groups data items by the specified getter.
max()

Calculates the maximum value. Applies only to numeric arrays.
max(getter)

Calculates the maximum of all values found using a getter.
min()

Calculates the minimum value. Applies only to numeric arrays.
min(getter)

Calculates the minumum of all values found using a getter.
select(getter)

Selects individual fields from data objects.
slice(skip, take)

Gets a specified number of data items starting from a given index.
sortBy(getter)

Sorts data items by the specified getter in ascending order.
sortBy(getter, desc)

Sorts data items by the specified getter in the specified sorting order.
sum()

Calculates the sum of all values.
sum(getter)

Calculates the sum of all values found using a getter.
thenBy(getter)

Sorts data items by one more getter in ascending order.
thenBy(getter, desc)

Sorts data items by one more getter in the specified sorting order.
toArray()

Gets data items associated with the Query. This is a synchronous alternative to the enumerate() method.