Data Displayed As Undefined On Ajax Json

I got stuck to parsing the json data to html, but got the undefined value. $.ajax({ type: 'GET', url: 'http://localhost/rest/api/kkb/detail/?key=39E62227E3294114BE8EADF3B6D

Solution 1:

var response= [{"status":true,"message":"Detail Kkb","data":{"kkb":{"id":"4","year":"2014","periode":"S-I","name":"TWA Joe Som"}}}];
 var trHTML = '';
       $.each(response, function (i, item) {
           trHTML += '<tr><td>' + item.data.kkb.name + '</td><td>' + item.data.kkb.year + '</td><td>' + item.data.kkb.period + '</td></tr>';
       });
       console.log(trHTML);
       $('#records_table').append(trHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tr id="records_table"></tr>
</table>