All Components

Data Query Overview

The Kendo UI Data Query package (@progress/kendo-data-query) provides means to make easier appling operations such as sorting, filtering, grouping and aggregataion over data.

This packages exports several functions to help translating the data operation descriptors to functions for in-memory array binding as well as serializing them to OData v4 URI specification.


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",
        "quantityPerUnit": "12 - 550 ml bottles",
        "unitPrice": 10,
        "unitsInStock": 13,
        "unitsOnOrder": 70,
        "discontinued": false,
        "category": {
            "categoryName": "Condiments"
        }
    },
    {

        "productName": "Chef Anton's Cajun Seasoning",
        "quantityPerUnit": "48 - 6 oz jars",
        "unitPrice": 22,
        "unitsInStock": 53,
        "discontinued": false,
        "category": {
            "categoryName": "Condiments"
        }
    },
    {
        "productName": "Chef Anton's Gumbo Mix",
        "quantityPerUnit": "36 boxes",
        "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 }
          ]
      }
});

console.log(JSON.stringify(result, null, 2));
/* output
{
  "data": [
    {
      "aggregates": {
        "unitPrice": {
          "sum": 53.35
        },
        "unitsInStock": {
          "sum": 66
        }
      },
      "field": "category.categoryName",
      "items": [
        {
          "productName": "Chef Anton's Gumbo Mix",
          "quantityPerUnit": "36 boxes",
          "unitPrice": 21.35,
          "unitsInStock": 0,
          "discontinued": true,
          "category": {
            "categoryName": "Condiments"
          }
        },
        {
          "productName": "Aniseed Syrup",
          "quantityPerUnit": "12 - 550 ml bottles",
          "unitPrice": 10,
          "unitsInStock": 13,
          "unitsOnOrder": 70,
          "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


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(JSON.stringify(result, null, 2));
/* output
[
  {
    "name": "Beef",
    "category": "Food",
    "subcategory": "Meat"
  },
  {
    "name": "Pepper",
    "category": "Food",
    "subcategory": "Vegetables"
  },
  {
    "name": "Pork",
    "category": "Food",
    "subcategory": "Meat"
  }
]
*/

Filtering


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


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"
  }
]
*/

Aggregates


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
  }
}
*/
In this article