JSFiddle - React, Tailwind, and code Playground

by Kyrylo Slatin

HTML

<button onclick="demoReduce()">Reduce-map</button>
<button onclick="demoFor()">Nested FORs</button>

JavaScript

function isEmptyArray(arg){
    return !arg || !(arg.length > 0);
}
function isNonZeroGrade(txn){ 
    return txn.grade;
}
var object = {
    getTxns: function () {
        return this.data.reduce(function (accumulator, page, pageIndex) {
            return accumulator.concat(               
                (isEmptyArray(page.txns) ? [{}] : page.txns.filter(isNonZeroGrade)).map(function(txn, txnIndex){ 
                    return {
                        page: pageIndex,
                        txn: txn.grade ? txnIndex : 0,
                        virtual: !txn.grade                    
                    }
            })) ;
        }, []);
    },
    data: [
  {
    "page_idx": 0,
    "page_image_url": "",
    "doc_pk": 123456,
    "txns": [
      {
        "page_idx": 0,
        "grade": 0,
        "explanation": "test 1",
        "id": 1962754,
      },
      {
        "page_idx": 0,
        "is_recurring": false,
        "bank_account_pk": null,
        "grade": 1,
        "explanation": "test 2",
        "id": 1962753,
      },
      {
        "page_idx": 0,
        "is_recurring": false,
        "bank_account_pk": null,
        "grade": 1,
        "explanation": "test 2",
        "id": 1962753,
      },
   ]
  },
  {
    "page_idx": 1,
    "page_image_url": "",
    "doc_pk": 2654321,
    "txns": [
      {
        "page_idx": 1,
        "is_recurring": false,
        "bank_account_pk": null,
        "grade": 1,
        "explanation": "test 2",
        "id": 1962753,
      },
    ]
  },
  {
    "page_idx": 2,
    "page_image_url": "",
    "doc_pk": 123457,
    "txns": []
  }
],
    getTxns_old: function () {
        var txnsToCheck = [];
        var pages = this.data;
        for (var i = 0; i < pages.length; i++) {
            var page = pages[i];
            var txns = [];
            for (var j = 0; j < page.txns.length; j++) {
                if (page.txns[j].grade) {
                    txns.push({
                        page: i,
                    ...