Using Handlebars to access Alpha Vantage API

Question

I am trying to access the Meta Data object in the API using Handlebars.js but in the console I keep getting an error saying "Missing Helper: Meta". I am not sure what is causing this any help is appreciated.

 <body>
    <div class="container" id="content"></div>
    <template id="template">
      <div class="info">
        {{Meta Data}}
      </div>
    </template>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

My JS file:

const content = document.getElementById('content');
const template = document.getElementById('template').innerHTML;
const info = document.querySelector('.info');

function render(context) {
  let compiled = Handlebars.compile(template);
  template.innerHTML = compiled(context);
}

$.ajax({
  url:
    'https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=MSFT&interval=5min&apikey=demo',
  method: 'GET'
})
  .done(function(stonk) {
    console.log(stonk);

    content.innerHTML = render(template, { info: stonk });
  })
  .fail(function(error) {
    console.error('Something went wrong', error);
  });

score 0 · Answer 1 · answered Sep 01 '20 at 06:09

I'm not intimately familiar with Handebars but you can probably pin the issue to the fact that the key is "Meta Data" with a space. In your handlebars template you are calling {{Meta Data}} which sees Meta as a name for a helper rather than the Object key.

Using Handlebars to access Alpha Vantage API

1 Answers1