javascriptformiocolumn-sum

Problem with table data sum in FormIO table element


With this script I can sum all the values ​​set in the cells of a formIO table element

value = Object.keys(data).reduce((acc, key) => {
  if (key === "totalTableData") return acc;
  if (data[key]) {
    return acc + data[key];
  }
  return acc;
}, 0);

The problem is when I sum 1 + 1, for example, the result I get is 32 (1+1=32). I don't know why this happens even after copying the solution example in this question (Get column data sum from FormIO table element). Also, how could be the script to sum specific fields and not the whole table?

JSON:

{
    "label": "Table",
    "cellAlignment": "left",
    "key": "table",
    "type": "table",
    "numRows": 4,
    "input": false,
    "tableView": false,
    "rows": [
      [
        {
          "components": []
        },
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Column 1",
              "refreshOnChange": false,
              "key": "html111",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Column 2",
              "refreshOnChange": false,
              "key": "html121",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Column total",
              "refreshOnChange": false,
              "key": "html124",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        }
      ],
      [
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Row 1",
              "refreshOnChange": false,
              "key": "html125",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column1row1",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column2row1",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalRow1",
              "type": "number",
              "input": true
            }
          ]
        }
      ],
      [
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Row 2",
              "refreshOnChange": false,
              "key": "html126",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column1row2",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "tableView": false,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "column2row2",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalRow2",
              "type": "number",
              "input": true
            }
          ]
        }
      ],
      [
        {
          "components": [
            {
              "label": "HTML",
              "attrs": [
                {
                  "attr": "",
                  "value": ""
                }
              ],
              "content": "Row total",
              "refreshOnChange": false,
              "key": "html127",
              "type": "htmlelement",
              "input": false,
              "tableView": false
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalColumn1",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalColumn2",
              "type": "number",
              "input": true
            }
          ]
        },
        {
          "components": [
            {
              "label": "Number",
              "hideLabel": true,
              "mask": false,
              "disabled": true,
              "tableView": false,
              "defaultValue": 0,
              "delimiter": false,
              "requireDecimal": false,
              "inputFormat": "plain",
              "truncateMultipleSpaces": false,
              "key": "totalTableData",
              "type": "number",
              "decimalLimit": 0,
              "input": true
            }
          ]
        }
      ]
    ],
    "numCols": 4
  }

Solution

  • The answer has disappeared... This is what they answered me:

    Set this script in Calculated Value (element's data tab):

    const fieldsToSum = ['field1', 'field2', 'field3']; 
    value = fieldsToSum.reduce((acc, key) => {
      if (data[key]) {
        return acc + Number(data[key]);
      }  return acc;
    }, 0);