Error rendering with jQuery Ajax

Question

Quick information on how this code should work: Ajax takes an html, compiles with Handlebars, the same ajax takes a json from an api, packages everything and renders an index with an append.

• var orderTemplate picks up an index.Hbs tab
• var temp compiles the Compute order to be rendered in index.Hbs
• Function addOrder(order) makes a append of the template within the index Hbs.

In theory, the Ajax requisition should take the Function addOrder(order) and insert into the index Hbs. along with the json that the Ajax url (url: '/api') also picks up. But on the screen only the Append of the template appears, without the content inside.

Below the code inside the main.js:

var orderTemplate = $('#template-html').html();

var temp = Handlebars.compile(orderTemplate); 

function addOrder(order) {
    $orders.append(temp(order));    
}

$.ajax({
    type: 'GET',
    url: '/api',
    success: function(orders){
        $.each(orders, function(i, order){
            addOrder(order);
        });
    },
    error: function(){
        alert('Erro ao listar :(');
    }
});

Below is the template, which the var orderTemplate = $('#template-html'). html(); handle via id. I use Handlebars to render.

<script  type="text/x-handlebars-template" id="template-html">
   <div id='conteudo' class='row' data-id='{{_id}}'>
   <h4><span class="noedit nome">{{nome}}</span></h4>
   <p><span class="noedit nome">{{bebida}}</span></p>
   </div> 
</script>

Below the Append photo. Note: The ajax can take the content searched by the api and play at index.Hbs, but can not print on the screen.

• Below is a picture of how the final result should look!

Thank you so much for those who read and tried to help. I did my best to enter as much detail as possible.

Answer 1

It was supposed to be working. No error in the console? The function addOrder ta really being called? If you inspect the element #orders don’t have anything? They seem like dumb questions, but sometimes a detail goes unnoticed.

I made a simple example and it worked right, below:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<style>
  #conteudo {
max-width: 250px;
padding: 20px;
border: 1px solid;
margin: 30px;
  }
</style>

<!-- DIV PRO APPEND -->
<div id="order"></div>

<!-- HTML HANDLEBARS -->
<script  type="text/x-handlebars-template" id="template-html">
   <div id='conteudo' class='row' data-id='{{_id}}'>
   <h4><span class="noedit nome">{{nome}}</span></h4>
   <p><span class="noedit nome">{{bebida}}</span></p>
   </div>
</script>

<!-- SCRIPT "GET" E RENDERIZA -->
<script>

  var json = [{
      nome: 'Nome 1',
      bebida: 'Bebida 1',
      _id: '1'
  },
  {
      nome: 'Nome 2',
      bebida: 'Bebida 2',
      _id: '2'
  }
  ];

  var orderTemplate = $('#template-html').html();

  var temp = Handlebars.compile(orderTemplate);

  var $orders = jQuery('#order');

  function addOrder(order) {
  $orders.append(temp(order));
  }

  $.each(json, function(i, order) {
  addOrder(order);
  });

</script>