Assume you have a sporting event or competition. Most likely the results will be stored in a database and have to be listed on a website. You can use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to fetch the data from the backend. This will not be explained in this document. I assume the data has already been retrieved and is an array of records. This array of records has to be in the correct order, but the **source function** can filter and sort the array on the fly within the report engine. This document decribes how to define **headers** and **footers** very easily and how to arrange record grouping by **compare function** as well. Each **header function** returns html based on static text and parameters *currentRecord*, *objWork* and *splitPosition*. Each **footer function** returns html based on static text and parameters *previousRecord*, *objWork* and *splitPosition*. It is very flexible, but you have to make the html yourself! Don't expect a WYSIWYG editor. # General structure of a report * Report has a report header and footer. Can be text or just html or both. * Report has one or more section levels. Section level **N** starts with header level **N** and ends with footer level **N**. * Section level **N** contains one or more times section level **N+1**, except the highest section level. * Highest section level contains the data created based on the records in the array. In most cases highest section level is just a html table or html flex item. # Example of report structure ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rybfepj2hcmwgdnluo7y.png) # Structure of report definition object called reportDefinition ```javascript const reportDefinition = {}; reportDefinition.headers = [report_header, header_level_1, header_level_2, header_level_3, ...]; // default = [] reportDefinition.footers = [report_footer, footer_level_1, footer_level_2, footer_level_3, ...]; // default = [] reportDefinition.compare = (previousRecord, currentRecord, objWork) => { // default = () => -1 // code that returns an integer (report level break number) }; reportDefinition.display = (currentRecord, objWork) => { // code that returns a string, for example return `${currentRecord.team} - ${currentRecord.player}`; }; // source array can be preprocessed, for example filter or sort reportDefinition.source = (arr, objWork) => preProcessFuncCode(arr); // optional function to preprocess data array // example to add extra field for HOME and AWAY and sort afterwards reportDefinition.source = (arr, objWork) => arr.flatMap(val => [{ team: val.team1, ...val }, { team: val.team2, ...val }]) .sort((a, b) => a.team.localeCompare(b.team)); // optional method 'init' which should be a function. It will be called with argument objWork // can be used to initialize some things. reportDefinition.init = objWork => { ... }; ``` # Examples of headers and footers array elements ```javascript reportDefinition.headers = []; // currentRecord=current record, objWork is extra object, // splitPosition=0 if this is the first header shown at this place, otherwise it is 1, 2, 3 ... reportDefinition.headers[0] = (currentRecord, objWork, splitPosition) => { // code that returns a string }; reportDefinition.headers[1] = '

Some string

'; // string instead of function is allowed; reportDefinition.footers = []; // previousRecord=previous record, objWork is extra object, // splitPosition=0 if this is the last footer shown at this place, otherwise it is 1, 2, 3 ... reportDefinition.footers[0] = (previousRecord, objWork, splitPosition) => { // code that returns a string }; reportDefinition.footers[1] = '

Some string

'; // string instead of function is allowed; ``` # Example of compare function ```javascript // previousRecord=previous record, currentRecord=current record, objWork is extra object, reportDefinition.compare = (previousRecord, currentRecord, objWork) => { // please never return 0! headers[0] will be displayed automagically on top of report // group by date return 1 (lowest number first) if (previousRecord.date !== currentRecord.date) return 1; // group by team return 2 if (previousRecord.team !== currentRecord.team) return 2; // assume this function returns X (except -1) then: // footer X upto and include LAST footer will be displayed (in reverse order). In case of footer function the argument is previous record // header X upto and include LAST header will be displayed. In case of header function the argument is current record // current record will be displayed // // if both records belong to same group return -1 return -1; }; ``` # Running counter In case you want to implement a running counter, you have to initialize/reset it in the right place. It can be achieved by putting some code in the relevant header: ```javascript reportDefinition.headers[2] = (currentRecord, objWork, splitPosition) => { // this is a new level 2 group. Reset objWork.runningCounter to 0 objWork.runningCounter = 0; // put extra code here return `

This is header number 2: ${currentRecord.team}

`; }; ``` If you only want to initialize **objWork.runningCounter** at the beginning of the report you can achieve that by putting the right code in *reportDefinition.headers[0]*. I call it property **runningCounter**, but you can give it any name you want. You have to increase the running counter somewhere in your code because... otherwise it is not running :smiley: for example: ```javascript reportDefinition.display = (currentRecord, objWork) => { objWork.runningCounter++; // put extra code here return `

This is record number ${objWork.runningCounter}: ${currentRecord.team} - ${currentRecord.player}

`; }; ``` > _Most of the time you don't need to manage a running counter in javascript! Most likely data comes from a database which can be queried by SQL. Use the [WINDOW function RANK] (https://www.geeksforgeeks.org/rank-function-in-sql-server/) to do the hard work._ # How to create totals for multiple section levels, a running total and even a numbered header ```javascript // headers // ----------------------------------------------------- reportDefinition.headers[3] = (record, objWork) => { objWork.totalSection3 = 0; // Section3 has multiple Section4's inside. We will number those Section4's objWork.runningCounterSection4 = 0; // any other code that is necessary and display the header return 'any string'; }; reportDefinition.headers[4] = (record, objWork) => { objWork.runningCounterSection4++; // any other code that is necessary and display the header return `${objWork.runningCounterSection4}: text header 4`; }; reportDefinition.headers[5] = (record, objWork) => { objWork.totalSection5 = 0; // any other code that is necessary and display the header return 'any string'; }; reportDefinition.headers[6] = (record, objWork) => { objWork.totalSection6 = 0; // any other code that is necessary and display the header return 'any string'; }; // footers // ----------------------------------------------------- reportDefinition.footers[3] = (record, objWork) => { // no extra code needed // any other code that is necessary and display the footer // most likely you display objWork.totalSection3 here return `

League above total: ${objWork.totalSection3}

`; }; reportDefinition.footers[4] = (record, objWork) => { // no extra code needed // any other code that is necessary and display the footer // if you want you can display objWork.totalSection3 as running total // it will be a running total because reportDefinition.headers[4] didn't reset objWork.totalSection3 return `

League above running total: ${objWork.totalSection3}

`; }; reportDefinition.footers[5] = (record, objWork) => { // no extra code needed // any other code that is necessary and display the footer // most likely you display objWork.totalSection5 here return `

State above total: ${objWork.totalSection5}

`; }; reportDefinition.footers[6] = (record, objWork) => { // no extra code needed // any other code that is necessary and display the footer // most likely you display objWork.totalSection6 here return `

City above total: ${objWork.totalSection6}

`; }; // ----------------------------------------------------- reportDefinition.display = (record, objWork) => { // 'amount' is the field to totalize const { amount } = record; objWork.totalSection3 += amount; objWork.totalSection5 += amount; objWork.totalSection6 += amount; // diplay the record return 'string containing record details'; }; ``` # How to preprocess the source array on the fly (for example in click event) ```javascript //

// All Players John Doe Peter Pan Jim Baker Harry Potter //

ron_clarijs

Create data reports using javascript function

Join Our Newsletter. No Spam, Only the good stuff.