Adding and removing query properties
Removing properties
To convert a standard query object to a JSON string containing only certain properties, you can take advantage of the second parameter of the JSON.stringify
function.
const query: RuleGroupType = {
id: 'root',
combinator: 'and',
rules: [
{
field: 'firstName',
operator: '=',
value: 'Steve',
},
],
};
// This will leave off the `id` and `combinator` properties:
console.log(JSON.stringify(query, ['rules', 'field', 'operator', 'value']));
// '{"rules":[{"field":"firstName","operator":"=","value":"Steve"}]}'
The formatQuery
function also provides a shortcut for producing a JSON string representing everything in the query except the id
properties:
console.log(formatQuery(query, 'json_without_ids'));
// '{"combinator":"and","rules":[{"field":"firstName","operator":"=","value":"Steve"}]}'
Adding properties
To produce a query object with additional properties, you can loop through the rules
array recursively. The transformQuery
function is provided for use cases such as this.
In the example below (inspired by issue #226), the inputType
from the fields
array is added to each rule.
import type { Field, RuleGroupType, RuleType } from 'react-querybuilder';
import { transformQuery } from 'react-querybuilder';
const fields: Field[] = [
{ name: 'description', label: 'Description', inputType: 'string' },
{ name: 'price', label: 'Price', inputType: 'number' },
];
const ruleProcessor = (r: RuleType): RuleType & { inputType?: string } => ({
...r,
inputType: fields.find(f => f.name === r.field)?.inputType,
});
const result = transformQuery(query, { ruleProcessor });
Manual recursion
This example (directly from issue #226) demonstrates manual recursion to achieve exactly the same result as the transformQuery
example above.
import type { Field, RuleGroupType, RuleType } from 'react-querybuilder';
const fields: Field[] = [
{ name: 'description', label: 'Description', inputType: 'string' },
{ name: 'price', label: 'Price', inputType: 'number' },
];
const processRule = (r: RuleType): RuleType & { inputType?: string } => ({
...r,
inputType: fields.find(f => f.name === r.field)?.inputType,
});
const processGroup = (rg: RuleGroupType): RuleGroupType => ({
...rg,
rules: rg.rules.map(r => {
if ('field' in r) {
return processRule(r);
}
return processGroup(r);
}),
});
const result = processGroup(query);