Best way to iterate through nested JSON arrays?

support
1

I am using Snipcart for a site and have my products in separate json format data files.
I have the products listing working well on the website so far, but within the json file, some of the fields are nested arrays.

What is the best way to bring the data from the arrays into the button class data?
This site is a work in progress, so please ignore the content, I am working on functionality at the moment with generic information.

Here is the product page.
https://islandviewpta.netlify.com/products/

Here is the source code for the Product Item cards.

Here is one of the json files that contains the product data that is used to create the card data and Snipcart button element information.

https://github.com/zivbk1/islandview-pta-site/blob/master/site/data/products/tshirt1.json

You will see in the json file a ‘custom’ element that contains arrays of custom item data for each product.
In the end, the custom data should be added into the button element information as shown below.

<button
    class="snipcart-add-item"
    data-item-id="1"
    data-item-name="T Shirt 1"
    data-item-price="25"
    data-item-weight="25"
    data-item-url="https://islandviewpta.netlify.com/products/"
    data-item-description="Show your school pride in this comfortable cotton T Shirt.">
    data-item-custom1-name="Size"
    data-item-custom1-value="Medium"
    data-item-custom1-options="Small|Medium[+5.00]|Large[+10.00]|Kid[-5.00]"
    data-item-custom2-name="Color"
    data-item-custom2-value="White"
    data-item-custom2-options="White|Blue|Gold|Gray"
    Buy T Shirt 1
</button>

I need to iterate through each ‘custom’ array. First to use the ‘index’ number to set the number (X) in the label ‘data-item-customX’ for each set, and to pull data like ‘name’ and ‘value’. Then iterate through each ‘option’ array to build the pipe separated list of ‘options’ as shown above.

Your assistance and guidance are greatly appreciated.

Best Regards,
-Bryan