Load accordion with DataSource in JavaScript Accordion control

06 Jun 2023 / 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.ts

index.html

import { Accordion } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
import { DataManager, Query, ODataAdaptor, ReturnOption } from '@syncfusion/ej2-data';

enableRipple(true);

let itemsData: any = [];
let mapping =  { header: 'FirstName', content: 'Notes' };
const SERVICE_URI: string = 'https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Employees';

new DataManager({ url: SERVICE_URI, adaptor: new ODataAdaptor})
  .executeQuery(new Query().range(1, 4)).then((e: ReturnOption) => {
    let result: any = e.result;

    for(let i: number = 0; i < result.length; i++) {
      itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
    }

    let accordion: Accordion = new Accordion({
      items: itemsData
    });
    accordion.appendTo('#element');
});

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/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>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>