Problem with table data sum in FormIO table element

Question

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
  }

Try parsing the field data i.e. `return acc + +data[key]` (note the numeric cast "+" preceding the access to `data`). — Mr. Polywhirl, Jan 17 '23 at 15:22

score 0 · Accepted Answer · answered Jan 26 '23 at 11:44

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);

Problem with table data sum in FormIO table element

1 Answers1

Linked