Components / React / Data Query
All components

Data Query Overview

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

The package exports functions which help you perform in-memory data operations. It also serializes the data descriptors according to the OData v4 URI specification.

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-data-query

  2. Once installed, you can import individual functions and then use the Data Query package.

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

Process Helpers for Bulk Operations

The Data Query provides functions that help you handle the following bulk data operations:

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 }
        ]
    }
});

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

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

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

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

In this article