React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Load accordion with DataSource in React Accordion component

14 Apr 2021 / 1 minute to read

You can bind any data object to Accordion items, by mapping it to header and content property.

In the below demo, Data is fetched from an OData service using DataManager. The result data is formatted as a JSON object with header and content fields, which is set to items property of Accordion.

Source
Preview
index.jsx
index.tsx
index.html
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { AccordionComponent } from '@syncfusion/ej2-react-navigations';
const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';
class ReactApp extends React.Component {
    accordCreated() {
        new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor })
            .executeQuery(new Query().range(1, 4)).then((e) => {
            let itemsData = [];
            let result = e.result;
            let mapping = { header: 'FirstName', content: 'Notes' };
            for (let i = 0; i < result.length; i++) {
                itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
            }
            this.items = itemsData;
            this.refresh();
        });
    }
    render() {
        return (<AccordionComponent ref={acrdn => this.acrdnInstance = acrdn} created={this.accordCreated}>
        </AccordionComponent>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query, ODataV4Adaptor, ReturnOption } from '@syncfusion/ej2-data';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';

const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';

class ReactApp extends React.Component<{}, {}> {
  public accordCreated(): void {
    new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor})
    .executeQuery(new Query().range(1, 4)).then((e: ReturnOption) => {
      let itemsData: Object[] = [];
      let result: any = e.result;
      let mapping =  { header: 'FirstName', content: 'Notes' };
      for(let i: number = 0; i < result.length; i++) {
        itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
      }
      this.items = itemsData;
      this.refresh();
    });
  }

  render() {
       return (
        <AccordionComponent ref={acrdn => this.acrdnInstance = acrdn} created={this.accordCreated}>
        </AccordionComponent>
      );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React Accordion Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>
Previous
Next