Javascript: заполняющая таблица на основе списка DropDown

Question

Я заимствовал какой-то код из другого сообщения, поэтому я понимаю, что обозначение col1 не обязательно для моего примера, но в основном это просто необходимо заполнить определенной информацией о сотрудниках, когда вы выбираете определенная тема (начисление заработной платы, налог и т.д.):

HTML:

<table class="table table-bordered table-striped"> 
    <tr> 
     <th> 
      <select class="col1 selectTopic"> 
       <option>Payroll</option> 
       <option>Tax</option> 
       <option>Accounts Payable</option> 
      </select> 
     </th> 
    </tr> 
    <tr> 
     <td class="col1 name"></td> 
    </tr> 
    <tr> 
     <td class="col1 photo"></td> 
    </tr> 
     <tr> 
     <td class="col1 email"></td> 
    </tr> 
     <tr> 
     <td class="col1 phone"></td> 
    </tr> 
</table> 

Javascript:

var data = { 
    "contacts": 
{ 
     "contact": [ 
{ 
      "name": "Payroll", 
      "photo": "Emp 1 Photo", 
      "email": "emp1@mysite.com", 
      "phone": "4113834848"}, 
{ 
      "name": "Tax", 
      "photo": "Emp 2 Photo", 
      "email": "emp2@mysite.com", 
      "phone": "4113834848"}, 
{ 
      "name": "Accounts Payable", 
      "photo": "Emp 3 Photo", 
      "email": "emp3@mysite.com", 
      "phone": "4113834848"}, 
]} 
} 

$(".selectTopic").change(function() { 
    var jthis = $(this); 
    var whichCol; 
    if (jthis.hasClass("col1")) { 
     whichCol = "col1"; 
    } 
    $.each(data.topics.topic, function(i, v) { 
     if (v.name == jthis.val()) { 
      $("td." + whichCol + ".name").html(v.name); 
      $("td." + whichCol + ".photo").html(v.photo); 
      $("td." + whichCol + ".email").html(v.email); 
      $("td." + whichCol + ".phone").html(v.phone); 
      return; 
     } 
    }); 

}); 

Answer 1

Вы data.topics.topic, я тебе верю хотят data.contacts.contact

https://jsfiddle.net/qfy397jt/

Вы знаете, как использовать инструменты разработчика/консоль в браузере? Это показало бы вам причину этой ошибки (data.topics не определено). https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en, если вы не использовали Dev. инструменты раньше!