Trying to create a contacts list with information from json isn"t working

Hi guys. i have been stuck for a while now trying to generate a contacts list generated from json and it still isn’t coming through. Here is the code i am working with

$('#mnu_contact').on('click', function () {
curSelPage = "contacts";
$('#nav_title').text('Contacts');
showMainMenu(false);
$.get( SERVER_URL+'/contacts.json', function(r_data) {
    console.log(r_data);
    var contacts = r_data;
    for (i in contacts) {
       $('#ul_sub_menu').append('<li><a href="#" class="item-link" onclick="selContact('+contacts[i]['id']+')"><div class="item-content">'+contacts[i]['name']+'</div></a></li>');
    } 
});    

});

and here is my html:

<div class="page" data-page="page-contact">
<div class="page-content">
	<div style="text-align: right;padding:20px;">
        <a href="#" onclick="onClickContactEdit({{contact['id']}})">Edit</a>  &nbsp;
        <a href="#" onclick="onDeleteContact({{contact['id']}})">Delete</a>                  
	</div>
	<div>
        <div class="row center"><h2>{{contact['name']}}</h2></div>
        <div class="center">{{contact['company']}}</div>
        <div class="">Phones</div>
        <div class="">{{contact['phones']}}</div>
        <div class="">Emails</div>
        <div class="">{{contact['emails']}}</div>
        <div class="">Addresses</div>
        <div class="">{{contact['physical_addresses']}}</div>
	</div>    	

</div>

can i get any one to look at this?

Hi, what isn’t working?
Can you make a jsfiddle
https://jsfiddle.net/

@pvtallulah thanks for offering. The API is hosted in my Machine, but here is a fiddle https://jsfiddle.net/xpvt214o/182281/

The code runs, cos it is accurately drawing information from the API. The problem is just that it returns undefined in the various places where it should populate information from the call

@nolimits4web help please? :confused: