HelpBot Assistant

How can I help you?

JSON Adaptors in React DataManager

20 Feb 20268 minutes to read

The JsonAdaptor is a highly efficient and versatile adaptor designed for performing data operations directly on in‑memory JavaScript objects and arrays. The JsonAdaptor eliminates the need for remote servers or complex data services, making the adaptor ideal for applications that rely heavily on local datasets. Whether data is sourced from static JSON files, dynamically generated collections, or client‑side state management systems, the JsonAdaptor offers a seamless and optimized way to manage and manipulate data.

With built‑in support for essential data operations such as filtering, sorting, grouping, searching, paging, and CRUD the JsonAdaptor provides a powerful abstraction layer that simplifies complex data transformations. Instead of manually writing data-handling logic, the JsonAdaptor leverages the DataManager engine to execute operations efficiently and consistently.

By combining performance with simplicity, the JsonAdaptor helps developers reduce boilerplate code and maintain a clean, predictable workflow. The adaptor proves particularly valuable for applications like dashboards, offline-first systems, data-heavy UI components, or any scenario where smooth local processing is critical.

Key advantages of the JsonAdaptor

  • Seamless local data processing: Operates entirely on JavaScript arrays without additional server calls, ensuring lightning‑fast data manipulation.

  • Built‑in support for advanced operations: Automatically handles filtering, sorting, grouping, paging, aggregates, and other data transformations with minimal setup.

  • Ideal for client-side data handling: Perfect for offline scenarios, demo/sample apps, static data files, or applications relying on local state stores.

  • Reduces development effort: Removes the burden of writing repetitive data-processing logic, allowing developers to focus on UI and application behavior.

  • Consistent results across components: Works seamlessly with Syncfusion components (Grid, ListView, Charts, Dropdowns, etc.), ensuring uniform behavior across the application.

When to use JsonAdaptor?

Use JsonAdaptor when the application:

  • Works primarily with client-side data.
  • Requires fast, local operations without network latency.
  • Uses data from JSON files, static assets, or generated datasets.
  • Needs rapid prototyping or offline/low-network environments.
  • Must apply complex filters, queries, or transformations on large arrays.
import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { data } from './datasource';
import { Row } from './rowTemplate';
export default class App extends React.Component {
    result = new DataManager({ json: data, adaptor: new JsonAdaptor })
        .executeLocal(new Query().take(8));
    items = this.result.map((row, index) => (
        <Row key={index} {...row} />
    ));
    render() {
        return (<table id='datatable' className='e-table'>
            <thead>
             <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
            </thead>
            <tbody>{this.items}</tbody>
           </table>);
    }
}
import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
import * as React from 'react';
import { data } from './datasource';
import { Row } from './rowTemplate';

export default class App extends React.Component<{}, {}> {
    public result: Object[] = new DataManager({ json: data, adaptor: new JsonAdaptor() })
        .executeLocal(new Query().take(8));
    
    public items: React.ReactElement[] = this.result.map((row: object, index) => (
        <Row key={index} {...row} />
    ));

    public render() {
        return (
            <table id='datatable' className='e-table'>
                <thead>
                    <tr><th>Order ID</th><th>Customer ID</th><th>Employee ID</th></tr>
                </thead>
                <tbody>{this.items}</tbody>
            </table>
        );
    }
}
export {};
export interface IOrders {
    OrderID: number; 
    EmployeeID: number; 
    CustomerID: string; 
    Order_Details: object[]; 
}
import * as React from 'react';
export class Row extends React.Component {
    render() {
        const item = this.props;
        return (<tr>
                 <td>{item.OrderID}</td>
                 <td>{item.CustomerID}</td>
                 <td>{item.EmployeeID}</td>
                </tr>);
    }
}
import * as React from 'react';
import { IOrders } from './orders';

export class Row extends React.Component<{}, {}>{
    public render() {
        const item: IOrders = this.props as IOrders; 
        return (<tr>
                 <td>{item.OrderID}</td>
                 <td>{item.CustomerID}</td>
                 <td>{item.EmployeeID}</td>
                </tr>)
    }
}

See also