React: Looping through arrays to sum field

Question

My listUserM array looks like this:

[
    {
        "Category": "BREAKFAST",
        "Name": "Sultana Bran Brekky (Single 70g)",
        "CategoryValue": "1breakfast",
        "id": "OoUFdwt6G8cbCJgzit6U",
        "Quantity": "10",
        "Foods": [
            {
                "label": "Sultana Bran (700g)",
                "packingLocation": "AA",
                "Weight": ".700",
                "Quantity": "0.10",
                "value": "SultanaBran(700g)"
            },
            {
                "label": "Chobani Pouch 100g",
                "packingLocation": "BB",
                "value": "ChobaniPouch100g",
                "Weight": "0.100",
                "Quantity": "0.50"
            }
        ]
    },
    {
        "Category": "BREAKFAST",
        "CategoryValue": "1breakfast",
        "Foods": [
            {
                "Food": "",
                "packingLocation": "BB",
                "value": "Bacon",
                "Weight": "0.400",
                "Quantity": 1,
                "label": "Bacon"
            },
            {
                "Quantity": "4.00",
                "Weight": ".060",
                "value": "Eggs",
                "packingLocation": "AA",
                "label": "Eggs"
            }
        ],
        "Name": "Bacon & Eggs",
        "id": "FD3Lwb5zjZtdJR5gj3VX",
    }
]

What I am trying to do is loop through and calculate the totals for the Foods sub-array that match the packingLocation of "BB"

I have been using this code, but I can't get it working for this sub-array:

var resSetCamperM=listUserM.filter(function(options){
return options.packingLocation == "BB";
}).reduce(function(a,b){
return a+parseFloat(b.Weight * b.Quantity);
},0);

If I change it to:

var resSetCamperM=listUserM[0].Foods.filter(function(options){
return options.packingLocation == "Camper";
}).reduce(function(a,b){
return a+parseFloat(b.Weight * b.Quantity);
},0);

That works - but obviously only for the first array.

How can I loop through the Foods array and calculate the totals for packingLocation = "BBB"?

Answer 1

You can use flatMap to remove an array layer from listUserM

const listUserM = [{
    "Category": "BREAKFAST",
    "Name": "Sultana Bran Brekky (Single 70g)",
    "CategoryValue": "1breakfast",
    "id": "OoUFdwt6G8cbCJgzit6U",
    "Quantity": "10",
    "Foods": [{
        "label": "Sultana Bran (700g)",
        "packingLocation": "AA",
        "Weight": ".700",
        "Quantity": "0.10",
        "value": "SultanaBran(700g)"
      },
      {
        "label": "Chobani Pouch 100g",
        "packingLocation": "BB",
        "value": "ChobaniPouch100g",
        "Weight": "0.100",
        "Quantity": "0.50"
      }
    ]
  },
  {
    "Category": "BREAKFAST",
    "CategoryValue": "1breakfast",
    "Foods": [{
        "Food": "",
        "packingLocation": "BB",
        "value": "Bacon",
        "Weight": "0.400",
        "Quantity": 1,
        "label": "Bacon"
      },
      {
        "Quantity": "4.00",
        "Weight": ".060",
        "value": "Eggs",
        "packingLocation": "AA",
        "label": "Eggs"
      }
    ],
    "Name": "Bacon & Eggs",
    "id": "FD3Lwb5zjZtdJR5gj3VX",
  }
]

var resSetCamperM = listUserM.flatMap(x => x.Quantity ? x.Foods.map(food => ({ ...food,
  Quantity: x.Quantity
})) : x.Foods).filter(function(options) {
  return options.packingLocation == "BB";
}).reduce(function(a, b) {
  return a + parseFloat(b.Weight * b.Quantity);
}, 0);

console.log(resSetCamperM)

Answer 2

function sumByLocation(data, location) {
  let sumSoFar = 0
  for (const { Foods } of data)
    for (const f of Foods)
      if (f.packingLocation === location)
        sumSoFar += Number(f.Quantity) * Number(f.Weight)

  return sumSoFar
}

sumByLocation(dataList, 'BB') // 0.45