How to populate avatar cards using DataManager?

We have rendered the Avatar and Card component using a string template, and the data for the Card component is fetched from a remote URL. The string template can be compiled using the compile function from the Syncfusion Base NPM package.

The data is fetched from the Service URL using the dataManager, and fetched data is passed to the compile function to compile the template.

Note: While using string template in compile function we should pass the class attribute as itself(class) not in react syntax(className).

Refer to the below code snippet to achieve the above:

import * as ReactDOM from 'react-dom';

import * as React from 'react';

import { compile } from "@syncfusion/ej2-base";

import { DataManager, Query, ReturnOption } from "@syncfusion/ej2-data";

export default class App extends React.Component<{}, {}> {

 public componentDidMount() {

        this.loadDataFromSPList();

    }

 

    public loadDataFromSPList() {

        // get the ID from Row section

        const avatarList: HTMLElement = document.getElementById("displayAvatar") as HTMLElement;

 

        // declare the URL name

        const SERVICE_URL: string = 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders';

 

         // render and compile the DOM element for displaying the details

             const template: string =

              '<div class="col-xl-4">'+

                '<div class="control-pane">' +

                    '<div class="sample_container card_sample">' +

                        '<div class="e-card e-custom-card">' +

                            '<div class="e-card-header">' +

                                '<div class="e-avatar e-avatar-circle e-avatar-xlarge">' +

                                '<img src="https://ej2.syncfusion.com/demos/src/grid/images/${EmployeeID}.png" alt="profile_pic" />' +

                                "</div>" +

                                " " +

                            "</div>" +

                       

                            '<div class="e-card-header">' +

                                '<div class="e-card-header-caption center">' +

                                    '<div class="e-card-header-title name">${CustomerID}</div>' +

                                    '<div class="e-card-sub-title">${EmployeeID}</div>' +

                                "</div>" +

                            "</div>" +

                       

                            '<div class="e-card-content">' +

                                '<p class="avatar-content">${ShipCountry}</p>' +

                            "</div>" +

                        "</div>" +

                    "</div>" +

                  "</div>" +

                "</div>";

 

        const compiledFunction = compile(template);

 

        // load the data from URL and then append DOM element to child form

        new DataManager({ url: SERVICE_URL }).executeQuery(new Query()).then((e: ReturnOption) => {

            (e.result as object[]).forEach((data: object) => {

                avatarList.appendChild(compiledFunction(data)[0]);

            });

        });

    }

    public render() {

        return (

            <div id="avatarID" fluid={true} width="100%">                       

                <div id="displayAvatar"></div>

            </div>

        );

    }

}

ReactDOM.render(<App />, document.getElementById('element'));