demo/read_tree.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Reading object from the ROOT file</title>
      <link rel="shortcut icon" href="../img/RootIcon.ico"/>
      <script type="importmap">
         { "imports": { "jsroot": "../modules/main.mjs", "jsroot/tree": "../modules/tree.mjs" } }
      </script>
   </head>

   <body>
      <p id="p_start">...</p>
      <p id="p_process">...</p>
      <p id="p_ready">...</p>
   </body>

   <script type='module'>

      import { openFile } from 'jsroot';
      import { TSelector, treeProcess } from 'jsroot/tree';

      class TExampleSelector extends TSelector {
         /** constructor */
         constructor() {
            super();

            this.cnt = 0;
            this.sumpx = 0;
            this.sumpy = 0;

            this.addBranch('px');
            this.addBranch('py');
         }

         /** function called before reading of TTree starts */
         Begin() {
            document.getElementById('p_start').innerHTML = 'Start reading TTree';
         }

         /** function called for every entry */
         Process() {
            this.sumpx += this.tgtobj.px;
            this.sumpy += this.tgtobj.py;
            this.cnt++;
            document.getElementById('p_process').innerHTML = `Process ${this.cnt} entries`;
         }

         /** function called when processing finishes */
         Terminate(res) {
            if (!res || !this.cnt) {
               res = 'Fail to process TTree';
            } else {
               let meanpx = this.sumpx/this.cnt, meanpy = this.sumpy/this.cnt;
               res = `MeanPX = ${meanpx.toFixed(4)}  MeanPY = ${meanpy.toFixed(4)}`;
            }
            document.getElementById('p_ready').innerHTML = res;
         }
      }

      const file = await openFile('../../files/hsimple.root');
      const tree = await file.readObject('ntuple;1');

      treeProcess(tree, new TExampleSelector());
   </script>

</html>