RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/Data_Layer/Query/Methods/ below:

DevExtreme Vue - Query Methods

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

Calculates a custom summary for all data items.

Parameters:

The initial value.

A function called for each item.

A function that is called after the calculation is finished.

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;

Calculates a custom summary for all data items.

Parameters:

A function that is called for each item.

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;

Calculates the average of all values. Applies only to numeric arrays.

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;

Calculates the average of all values found using a getter.

Parameters:

A getter; in most cases, the name of the field that provides values for the calculation.

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.

Calculates the number of data items.

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;

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

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;

Filters data items using a filter expression.

Parameters:

A filter expression; described in the Filtering section.

The Query with transformed data.

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;

Filters data items using a custom function.

Parameters:

A function that accepts a data item and returns true if it should be included in the resulting array and false otherwise.

The Query with transformed data.

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

Filtering

Groups data items by the specified getter.

Parameters:

A getter; in most cases, the name of the data field to group by.

The Query with transformed data.

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

Grouping

Calculates the maximum value. Applies only to numeric arrays.

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;

Calculates the maximum of all values found using a getter.

Parameters:

A getter; in most cases, the name of the field that provides values for the calculation.

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.

Calculates the minimum value. Applies only to numeric arrays.

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;

Calculates the minumum of all values found using a getter.

Parameters:

A getter; in most cases, the name of the field that provides values for the calculation.

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.

Selects individual fields from data objects.

Parameters:

A getter; in most cases, the names of the data fields to select.

The Query with transformed data.

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;

Gets a specified number of data items starting from a given index.

Parameters:

The index of the first data item to get.

Optional. The number of data items to get.

The Query with transformed data.

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;

Sorts data items by the specified getter in ascending order.

Parameters:

A getter; in most cases, the name of the data field to sort by.

The Query with transformed data.

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

Sorting

Sorts data items by the specified getter in the specified sorting order.

Parameters:

A getter; in most cases, the name of the data field to sort by.

Pass true to sort in descending order, false or nothing to sort in ascending order.

The Query with transformed data.

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

Sorting

Calculates the sum of all values.

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;

Calculates the sum of all values found using a getter.

Parameters:

A getter; in most cases, the name of the field that provides values for the calculation.

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.

Sorts data items by one more getter in ascending order.

Parameters:

A getter; in most cases, the name of the data field to sort by.

The Query with transformed data.

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

Sorting

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

Parameters:

A getter; in most cases, the name of the data field to sort by.

Pass true to sort in descending order, false or nothing to sort in ascending order.

The Query with transformed data.

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

Sorting

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

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;

Feel free to share topic-related thoughts here. If you have technical questions, please create a support ticket in the DevExpress Support Center. Thank you for the feedback!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4