Handlebars cannot access nested objects

[Fcarrion001]

I am sending data from a 3rd party api to my client and I cannot access the nested data This is what handlebars is generating

Api Games

Name

Project CARS 2
Platform

Release Date

this is what the data looks like in the console https://www.dropbox.com/s/qayrtv7fiiflx6x/Screenshot%202017-08-30%2019.39.17.png?dl=0

This is how I have handlebars set up

<h4>Api Games</h4>

{{#each games as |game|}}
<div class="col-xs-4 box">
  <div data-id="{{this.id}}">
    <ul name='games' class='handlebars-fields'>
      <h6>Name</h6>
      <li>{{game.name}}</li>
      <h6>Platform</h6>
      <li>{{game.release_dates.platform}}</li>
      <h6>Release Date</h6>
      <li>{{game.release_dates.human}}</li>
    </ul>
  </div>
</div>
    {{/each}}

This is the javascript handlebars logic

const showApiGamesHTML = showApiGamesTemplate({ games: games })
  $('.content').append(showApiGamesHTML)
  store.games = games
  console.log('data ', games)
}

this is the controller that I am making the request and sending the response with

def gameapi
    # user_key given by 3rd party api
    user_key = ENV['USER_KEY']
    p user_key
    p "route is being hit"
    # headers and get request required by the api in the format that the gem requires
    @games = HTTP.headers(:accept => 'application/json', 'user-key' => user_key)
              .get("https://api-2445582011268.apicast.io/games/?limit=50&scroll=1&fields=name,release_dates.human,release_dates.platform&filter[release_dates.platform][eq]=48&filter[release_dates.platform][eq]=6&filter[release_dates.platform][eq]=49&filter[release_dates.human][gte]=2017-Aug-30&filter[category][eq]=0&filter[release_dates.region][eq]=2").to_s
              # binding.pry
    render json: @games
  end

this is the ajax request

const indexApiGames = function () {
  return $.ajax({
    url: config.apiOrigin + '/game-api',
    method: 'GET',
    headers: {
      Authorization: 'Token token=' + store.user.token
    }
  })
}

This is the event handler

const onIndexApiGames = function (event) {
  event.preventDefault()
  api.indexApiGames()
    .then(ui.indexApiGamesSuccess)
    .catch(ui.indexApiGamesFailure)
}

[Fcarrion001]

Issue Resolved wrapping the nested data with the name of the parent object allows me access

{{!-- {{#each games as |game|}}
<div class="col-xs-4 box">
  <div data-id="{{this.id}}">
    <ul name='games' class='handlebars-fields'>
      <h6>Name</h6>
      <li>{{game.name}}</li> --}}
      {{#release_dates}}
      {{!-- <h6>Platform</h6>
      <li>{{platform}}</li>
      <h6>Release Date</h6>
      <li>{{human}}</li> --}}
      {{/release_dates}}
    {{!-- </ul>
  </div>
</div>
    {{/each}} --}}