All Components

Data Query Overview

The Data Query is a package for applying the sorting, filtering, grouping, and aggregate data operations.

The package exports several functions that help you perform in-memory data operations. It can also serialize the data descriptors according to the OData v4 URI specification.

Installation

  1. The Data Query package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-data-query
  3. Once installed, individual functions can be imported and the Data Query component is ready to use.

    import { process, orderBy, filterBy, /* etc...*/ } from '@progress/kendo-data-query';

Process Helpers for Bulk Operations

The following example demonstrates how to group, sort, and filter data with 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 }
        ]
    }
});

console.log(JSON.stringify(result, null, 2));
/* 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

You can sort an array of objects based on field and direction by using 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" }
]
*/

Filtering

You can filter an array of objects by using 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

You can split the data array into sets by using 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"
  }
]
*/

Aggregates

You can aggregate data based on the AggregateDescriptor by using 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 }
}
*/
In this article