Nested List View component adding values

App Building
, ,
1

Hello,

I have a nested List View component and I want to add all values of a certain field of the inner list view, as a grand total.

Here is my app:

image
image2560×1205 308 KB

The listView1 (inner listview) data has this structure:

{
  "0": {
    "heightType": "auto",
    "layoutType": "list",
    "marginType": "none",
    "showBorder": true,
    "data": [
      {
        "cRate": 30,
        "cMin": 0,
        "cMax": 0,
        "cSInput": 30,
        "profitInput": 20,
        "rateName": "**Documents air** [HAWB]",
        "base": 1,
        "vRate": 50,
        "vMin": 0,
        "vSInput": 50
      },
      {
        "cRate": 30,
        "cMin": 0,
        "cMax": 0,
        "cSInput": 30,
        "profitInput": 0,
        "rateName": "**AES / EEI (Customs)** [HAWB]",
        "base": 1,
        "vRate": 30,
        "vMin": 0,
        "vSInput": 30
      },
      {
        "cRate": 0.07,
        "cMin": 65,
        "cMax": 0,
        "cSInput": 65,
        "profitInput": 0,
        "rateName": "**Airport Transfer** [PesoVolLb]",
        "base": 0,
        "vRate": 0.07,
        "vMin": 65,
        "vSInput": 65
      }
    ],
    "paddingType": "none",
    "showDropShadow": true,
    "id": "listView1",
    "formDataKey": "listView1",
    "style": {
      "border-color": "rgba(224, 224, 224, 0)"
    },
    "itemWidth": "",
    "dynamicHeightsEnabled": false,
    "numColumns": 3,
    "itemHeight": 1,
    "overflowType": "scroll",
    "instances": 3,
    "maintainSpaceWhenHidden": true,
    "direction": "vertical"
  },
  "1": {
    "heightType": "auto",
    "layoutType": "list",
    "marginType": "none",
    "showBorder": true,
    "data": [
      {
        "cRate": 0.15,
        "cMin": 25,
        "cMax": 0,
        "cSInput": 25,
        "profitInput": 90,
        "rateName": "**Kompass Fee (AIR)** [PesoVolKg]",
        "base": 100,
        "vRate": 1.15,
        "vMin": 25,
        "vSInput": 114.99999999999999
      }
    ],
    "paddingType": "none",
    "showDropShadow": true,
    "id": "listView1",
    "formDataKey": "listView1",
    "style": {
      "border-color": "rgba(224, 224, 224, 0)"
    },
    "itemWidth": "",
    "dynamicHeightsEnabled": false,
    "numColumns": 3,
    "itemHeight": 1,
    "overflowType": "scroll",
    "instances": 1,
    "maintainSpaceWhenHidden": true,
    "direction": "vertical"
  },
  "2": {
    "heightType": "auto",
    "layoutType": "list",
    "marginType": "none",
    "showBorder": true,
    "data": [],
    "paddingType": "none",
    "showDropShadow": true,
    "id": "listView1",
    "formDataKey": "listView1",
    "style": {
      "border-color": "rgba(224, 224, 224, 0)"
    },
    "itemWidth": "",
    "dynamicHeightsEnabled": false,
    "numColumns": 3,
    "itemHeight": 1,
    "overflowType": "scroll",
    "instances": 0,
    "maintainSpaceWhenHidden": true,
    "direction": "vertical"
  },
  "heightType": "auto",
  "layoutType": "list",
  "marginType": "none",
  "showBorder": true,
  "data": [
    {
      "cRate": 30,
      "cMin": 0,
      "cMax": 0,
      "cSInput": 30,
      "profitInput": 20,
      "rateName": "**Documents air** [HAWB]",
      "base": 1,
      "vRate": 50,
      "vMin": 0,
      "vSInput": 50
    },
    {
      "cRate": 30,
      "cMin": 0,
      "cMax": 0,
      "cSInput": 30,
      "profitInput": 0,
      "rateName": "**AES / EEI (Customs)** [HAWB]",
      "base": 1,
      "vRate": 30,
      "vMin": 0,
      "vSInput": 30
    },
    {
      "cRate": 0.07,
      "cMin": 65,
      "cMax": 0,
      "cSInput": 65,
      "profitInput": 0,
      "rateName": "**Airport Transfer** [PesoVolLb]",
      "base": 0,
      "vRate": 0.07,
      "vMin": 65,
      "vSInput": 65
    }
  ],
  "paddingType": "none",
  "showDropShadow": true,
  "id": "listView1",
  "formDataKey": "listView1",
  "style": {
    "border-color": "rgba(224, 224, 224, 0)"
  },
  "itemWidth": "",
  "dynamicHeightsEnabled": false,
  "numColumns": 3,
  "itemHeight": 1,
  "overflowType": "scroll",
  "instances": 3,
  "maintainSpaceWhenHidden": true,
  "direction": "vertical"
}

I am trying this but it doesnt work:

const values = {{ listView1 }}
  
const total = values.reduce((ac, cu) => ac + cu.data.reduce((a, c) => a + c.profitInput, 0), 0)

return total
  • message:"values.reduce is not a function"

I even tried changing the object to an array like this before:

const values = Object.values({{ listView1 }})
  • message:"Cannot read properties of undefined (reading 'reduce')"

It is very strange, any ideas how to tackle this?

2

Hi @ggallese, when List Views are nested, their state is not held in an array but instead as an object. As you may have guessed, values.reduce in your code isn't working since values isn't an array. Object.values({{ listView1 }}) is also returning some excess values that don't contain the data that you're looking for.

If you filter to only use the values that include data, you should be in a better spot --

const values = {{ Object.values(listView1).filter((value) => !!value.data) }}

Let me know if this helps!

2 Likes
3

Awesome!!! Thanks, it works!!

1 Like