Count product variants in an array using javascript/GTM-CodePudding

I am setting up a variable in GTM to return a count of the number of sizes in-stock (regardless of the color).

In the example below (pulled from the dataLayer) there are 2 colors and 2 sizes for each color (total of 4 sizes). But, the first size is out of stock. So, in this case the output would be 3, since 3 of the 4 sizes are in stock.

How would I set up the JS to make this work?

I really appreciate the help!

{
"product": {
    "variants": [
        {
            "colorID": "03",
            "colorName": "MEDIUM DENIM",
            "sizes": [
                {
                    "sizeID": "10",
                    "sizeName": "33",
                    "available": "false",
                    "price": "24.0"
                },
                {
                    "sizeID": "1",
                    "sizeName": "24",
                    "available": "true",
                    "price": "24.0"
                }
            ]
        },
        {
            "colorID": "06",
            "colorName": "LIGHT DENIM",
            "sizes": [
                {
                    "sizeID": "1",
                    "sizeName": "24",
                    "available": "true",
                    "price": "24.0"
                },
                {
                    "sizeID": "2",
                    "sizeName": "25",
                    "available": "true",
                    "price": "24.0"
                }
            ]
        }
    ]
}

}

CodePudding user response：

Couple of ways you could do this, using map/filter or forEach loop with conditional.

Notes are in code...

const obj = {
  "product": {
    "variants": [{
        "colorID": "03",
        "colorName": "MEDIUM DENIM",
        "sizes": [{
            "sizeID": "10",
            "sizeName": "33",
            "available": "false",
            "price": "24.0"
          },
          {
            "sizeID": "1",
            "sizeName": "24",
            "available": "true",
            "price": "24.0"
          }
        ]
      },
      {
        "colorID": "06",
        "colorName": "LIGHT DENIM",
        "sizes": [{
            "sizeID": "1",
            "sizeName": "24",
            "available": "true",
            "price": "24.0"
          },
          {
            "sizeID": "2",
            "sizeName": "25",
            "available": "true",
            "price": "24.0"
          }
        ]
      }
    ]
  }
}
// create a constant and map the object.keys 
// then filter the available key 
const availableProducts = obj.product.variants.map(val =>
  val.sizes.filter(item => item.available === 'true'))

console.log(availableProducts)

// or you could use an empty array and then run a loop over the
// keys to find the sizes, with a conditional 
// then push an object into the empty array with
// the values you wish to return 
const availableProductsArr = [];
// loop over the array of objects to get to the nested array
obj.product.variants.forEach(val => {
  // loop over the nested array to get each 'sizes' 
  val.sizes.forEach(a => {
    // check available key === 'true'
    // push object into array with any key/value pairs
    // you want to know
    a.available === 'true' ? availableProductsArr.push({
    colorID: val.colorID,
    colorName: val.colorName,
    sizeID: a.sizeID,
    sizeName: a.sizeName,
    price: a.price
    }) : null; 
  })
})

console.log(availableProductsArr)

CodePudding user response：

If I understand correctly what result is expected

const data = {"product": {"variants": [
  {"colorID": "03","colorName": "MEDIUM DENIM","sizes": [
    {"sizeID": "10","sizeName": "33","available": "false","price": "24.0"},
    {"sizeID": "1","sizeName": "24","available": "true","price": "24.0"}]},
  {"colorID": "06","colorName": "LIGHT DENIM","sizes": [
    {"sizeID": "1","sizeName": "24","available": "true","price": "24.0"},
    {"sizeID": "2","sizeName": "25","available": "true","price": "24.0"}]}]}};
    

const result = {
  product: {
    variants: data.product.variants.map((variant) => (
      { 
        ...variant,  
        sizes: variant.sizes.filter(({ available }) => available === "true"),
      }
    ))
  }
}



console.dir(result, {depth: null})

.as-console-wrapper{min-height: 100%!important; top: 0}