Данные запроса Ajax не могут отображаться в таблице

Question

Код JavaScript

$(function (){
  $.ajax({
    type : 'GET',
    url : 'order/orders.json',
    dataType : 'JSON',
    success: function(data) {
      /*var trHTML = '';
      $.each(orders, function (i, item) {
        trHTML += '<tr><th scope="row">' + orders.id[i] + '</th><td>' + orders.name[i] + '</td><td>' + orders.drink[i] + '</td></tr>';
      });
      $('#location').append(trHTML);*/
      alert('test');
    },  
    error: function (data) {
      alert(data.responseText);
    }
  });
}); 

orders.json

[
  {
    id: 1,
    name: 'john',
    drink: 'coffee'
  },
  {
    id: 2,
    name: 'doe',
    drink: 'tea'
  }
]

Answer 1

Сначала вы должны получить объект, используя индекс, например:

orders[i].id
orders[i].name
orders[i].drink

Вместо:

orders.id[i]
orders.name[i]
orders.drink[i]

Полный код будет:

$(function (){
  $.ajax({
    type : 'GET',
    url : 'order/orders.json',
    dataType : 'JSON',
    success: function(orders) {
      var trHTML = '';
      $.each(orders, function(i, item) {
        trHTML += '<tr><th scope="row">' + orders[i].id + '</th><td>' + orders[i].name + '</td><td>' + orders[i].drink + '</td></tr>';
      });
      $('#location').append(trHTML);
    });
    },  
    error: function (data) {
      alert(data.responseText);
    }
  });
}); 

ПРИМЕЧАНИЕ: Убедитесь, что имя параметра ответа, которое возвращает success обратный вызов, равно orders.

Образец живого прижигания:

$(function() {
  var orders = [{
      id: 1,
      name: 'john',
      drink: 'coffee'
    },
    {
      id: 2,
      name: 'doe',
      drink: 'tea'
    }
  ];
  var trHTML = '';
  $.each(orders, function(i, item) {
    trHTML += '<tr><th scope="row">' + orders[i].id + '</th><td>' + orders[i].name + '</td><td>' + orders[i].drink + '</td></tr>';
  });
  $('#location').append(trHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="location" border=1></table>