Get to second level array in JSON

im more of a designer and less of a programmer so any help is greatly appreciated. The idea behind this project is to generate a dropdown menu using the “name” from the data json and when selected the “stock” information will appear as well. I’ve been able to get to the “name”:”Pantone 12345″ but when i try to access the name of the stocks i get and error saying it can’t find property “name”

here is my json

var data = 

[
    {   "id":"Pantone 12345",
        "name":"Pantone 12345",
        "stocks": 
                
                        [
                            {"name": "SG123345", "catagory":"Semigloss","pantoneMatch": true},
                            {"name": "SP9383834", "catagory":"SilverMax","pantoneMatch": false},
                        ]
        
    },
    {   "id":"Pantone 9786754",
        "name":"Pantone 9786754",
        "stocks": 
                        [
                            {"name": "SG123345", "catagory":"Semigloss","pantoneMatch": true},
                            {"name": "SP9383834", "catagory":"SilverMax","pantoneMatch": false},
                        ]

    }


]

here is the code im using to create the dropdown

var dataStock = (data.stocks.name)
                console.log(dataStock)
                $.each(data, function(i, option){
                    console.log(option)
                    $('#pantoneSelect').append($('<option>').attr("value", option.id).text(option.name));
                })

the var dataStock error out because i can’t get to the stocks name.

Answer

this way ?

const data = 
  [ { id   : 'Pantone 12345'
    , name : 'Pantone 12345'
    , stocks: 
      [ { name: 'SG123345',  catagory: 'Semigloss', pantoneMatch: true  } 
      , { name: 'SP9383834', catagory: 'SilverMax', pantoneMatch: false } 
      ] 
    }  
  , { id   : 'Pantone 9786754'
    , name : 'Pantone 9786754' 
    , stocks: 
      [ { name: 'SG123345',  catagory: 'Semigloss', pantoneMatch: true  } 
      , { name: 'SP9383834', catagory: 'SilverMax', pantoneMatch: false } 
  ] } ] 

const myForm = document.forms['my-form']

for (let pantone of data) 
for (let stock of (pantone?.stocks || []))
  {
  myForm.pantoneSelect.add( new Option( stock.name, `${pantone.id}|${stock.name}`))
  }

myForm.onsubmit = e =>
  {
  e.preventDefault()

  if (myForm.pantoneSelect.value != '')
    {
    let [id,stockName] = myForm.pantoneSelect.value.split('|')
      , dataRow        = data.find(x=>x.id === id)
      , stockRow       = dataRow.stocks.find(x=>x.name===stockName)
      ;
    console.clear()
    console.log( `data-id=${dataRow.id}, data-Name=${dataRow.name}` )
    console.log( `stock=${JSON.stringify(stockRow)}` )
    }  
  }

.as-console-row::after  { display:none !important; }

<form action="" name="my-form">

  <select name="pantoneSelect">
    <option selected disabled value="">pick one pantone</option>
  </select>
  <button type="submit">submit</button>
</form>