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.
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"));<!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/20.2.43/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>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"));