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 :
It seems like there is an issue with the data type of the values being summed. The + operator is used for both addition and concatenation, depending on the data types of the operands. If the values being summed are strings, JavaScript will concatenate them instead of adding them. To fix this issue, you can use the parseInt() or Number() function to convert the string values to numbers before adding them.
To sum specific fields and not the whole table, you can add conditions to check the key of each field before adding its value to the accumulator. For example, you can check if the key starts with a specific prefix, or if it is included in an array of specific keys.
Here is an example of how you can modify the script to sum specific fields:
const fieldsToSum = ["field1", "field2", "field3"];
value = Object.keys(data).reduce((acc, key) => {
if (fieldsToSum.includes(key) && data[key]) {
return acc + Number(data[key]);
} return acc;
}, 0);
This script will sum the values of the fields whose keys are included in the fieldsToSum array, and will ignore the rest of the fields.