New to Kendo UI for Angular? Start a free 30-day trial

Process Helpers for Bulk Operations

The Data Query provides functions that help you handle bulk data operations such as sorting, filtering, grouping, and aggregates.

The following example demonstrates how to group, sort, and filter data by using a single helper function.

import { process } from '@progress/kendo-data-query';

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Cajun Seasoning", "unitPrice": 22, "unitsInStock": 53, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
      "category": { "categoryName": "Condiments" }
    }
];

const result = process(data, {
    group: [{
        field: 'category.categoryName',
        aggregates: [
            { aggregate: "sum", field: "unitPrice" },
            { aggregate: "sum", field: "unitsInStock" }
        ]
    }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
            { field: "discontinued", operator: "eq", value: true },
            { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

/* output
{
  "data": [
    { "aggregates": {
        "unitPrice": { "sum": 53.35 },
        "unitsInStock": { "sum": 66 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
          "category": { "categoryName": "Condiments" }
        },
        { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
          "category": { "categoryName": "Condiments" }
        }
      ],
      "value": "Condiments"
    },
    {
      "aggregates": {
        "unitPrice": { "sum": 37 },
        "unitsInStock": { "sum": 56 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        },
        { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        }
      ],
      "value": "Beverages"
    }
  ],
  "total": 4
}
*/

Sorting

To sort an array of objects based on a field and direction, use the orderBy helper function. The method accepts a data array and one or more SortDescriptors.

import { orderBy } from '@progress/kendo-data-query';

const data = [
  { name: "Pork", category: "Food", subcategory: "Meat" },
  { name: "Pepper", category: "Food", subcategory: "Vegetables" },
  { name: "Beef", category: "Food", subcategory: "Meat" }
];

const result = orderBy(data, [{ field: "name", dir: "asc" }]);

console.log(result);

/* output
[
  { "name": "Beef", "category": "Food", "subcategory": "Meat" },
  { "name": "Pepper", "category": "Food", "subcategory": "Vegetables" },
  { "name": "Pork", "category": "Food", "subcategory": "Meat" }
]
*/

The SortDescriptor(slug://api_kendo-data-query_sortdescriptor) has a compare property that allows you to define a function with custom sorting logic.

import { orderBy, SortDescriptor } from '@progress/kendo-data-query';

const data = [{ foo: 100 }, { foo: 1 }, { foo: 10 }, {  foo: 5 }];

const sortDescriptor: SortDescriptor[] = [{ 
     field: 'foo',
     compare: (a, b) => (a.foo === b.foo) ? 0 : (a.foo > b.foo ? 1 : -1)
}];

const result = orderBy(data, sortDescriptor);

console.log(result);
// [{ foo: 1 }, { foo: 5 }, { foo: 10 }, {  foo: 100 }

Filtering

To filter an array of objects, use the filterBy helper function. The method accepts a data array and one or more FilterDescriptors.

import { filterBy } from '@progress/kendo-data-query';

const data = [
    { name: "Pork", category: "Food", subcategory: "Meat" },
    { name: "Pepper", category: "Food", subcategory: "Vegetables" },
    { name: "Beef", category: "Food", subcategory: "Meat" }
];

const result = filterBy(data, {
    logic: 'and',
    filters: [
        { field: "name", operator: "startswith", value: "p", ignoreCase: true },
        { field: "subcategory", operator: "eq", value: "Meat" },
    ]
});

console.log(JSON.stringify(result, null, 2));
/* output
[
    { "name": "Pork", "category": "Food", "subcategory": "Meat" }
]
*/

Grouping

To split the data array into sets, use the groupBy helper function. The method accepts a data array and one or more GroupDescriptors.

import { groupBy } from '@progress/kendo-data-query';

const data = [
    { name: "Pork", category: "Food", subcategory: "Meat" },
    { name: "Pepper", category: "Food", subcategory: "Vegetables" },
    { name: "Beef", category: "Food", subcategory: "Meat" }
];

const result = groupBy(data, [{ field: "category" }, { field: "subcategory", dir: "desc" }]);

console.log(JSON.stringify(result, null, 2));
/* output
[
  { "aggregates": {},  "field": "category",
    "items": [
        {"aggregates": {}, "field": "subcategory",
        "items": [
            { "name": "Pork", "category": "Food", "subcategory": "Meat" },
            { "name": "Beef", "category": "Food", "subcategory": "Meat" }
        ],
        "value": "Meat"
      },
      { "aggregates": {}, "field": "subcategory",
        "items": [
            {"name": "Pepper", "category": "Food", "subcategory": "Vegetables"}
        ],
        "value": "Vegetables"
      }
    ],
    "value": "Food"
  }
]
*/

Note: the groupBy function does not apply the direction, specified in the GroupDescriptors.

Use the process method instead:


process(initialData, {group: [group descriptors]}).data

Aggregates

To aggregate data based on the AggregateDescriptor, use the aggregateBy helper function.

import { aggregateBy } from '@progress/kendo-data-query';

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39 },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17 },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13 }
];

const result = aggregateBy(data, [
      { field: 'productName', aggregate: 'count' },
      { field: 'unitPrice', aggregate: 'sum' },
      { field: 'unitPrice', aggregate: 'average' },
      { field: 'unitsInStock', aggregate: 'min' },
      { field: 'unitsInStock', aggregate: 'max' },
]);


console.log(JSON.stringify(result, null, 2));
/* output
{
    "productName": { "count": 3 },
    "unitPrice": { "sum": 47, "average": 15.666666666666666 },
    "unitsInStock": { "min": 13, "max": 39 }
}
*/

Process Helpers for Bulk Operations

Sorting

Filtering

Grouping

Aggregates

Suggested Links