If i want to render it (this data json return for one company)

 {
  "symbol": "BAC",
  "companyName": "Bank Of America Corp.",
  "primaryExchange": "NEW YORK STOCK EXCHANGE, INC.",
  "calculationPrice": "close",
  "open": 28.81,
  "openTime": 1607437801023,
  "openSource": "official",
  "close": 28.81,
  "closeTime": 1607461201852,
  "closeSource": "official",
  "high": 29.12,

}

I can access data above like this with handlebars. (It's work !)

<h4>LatestPrice <span class="badge bg-secondary">  {{stock.open}}    </span></h4>
<h4>PreviousClose <span class="badge bg-secondary">  {{ stock.close}}    </span></h4>
<h4>ChangePercent <span class="badge bg-secondary">  {{  stock.closeTime}}     </span></h4>

And my question

If i want to access specific propeties in nested object data below, such as i want to access stock.avgTotalVolume (for AMC Entertainment) How can i do that with handlebars ?

[
 {
  avgTotalVolume: 96209223,
  calculationPrice: 'tops',
  companyName: 'AMC Entertainment Holdings Inc - Class A'
  
 } ,
 {
  avgTotalVolume: 81507563,
  calculationPrice: 'tops',
  companyName: 'Apple Inc',
  
 } ,
 {
  avgTotalVolume: 4160539,
  calculationPrice: 'tops',
  companyName: 'Helbiz Inc.',
 
 } ,
 {
  avgTotalVolume: 60408227,
  calculationPrice: 'tops',
  companyName: 'Ford Motor Co.',
 } ,
]