Parse Json Array in jQuery

Parse Json Array in jQuery

Hi I am new to jQuery and Java script. I need to parse json file that jave
arrays, I use this code:
<script>
$.getJSON('mat.json', function(data)
{
var items = [];
$.each(data, function(key, val)
{
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {'class': 'my-new-list', html:
items.join('')}).appendTo('body');});
</script>
for this json file:
{
"@file_name": "materials",
"materials": [
{
"@site_name_English": "N/A",
"@site_name_Spanish": "N/A",
"@site_number": "1",
"zoom": [
{
"@zoom_name_English": "Main Reservoir",
"@zoom_name_Spanish": "Depósito principal",
"@zoom_number": "1",
"icon": [
{
"@icon_name": "Info Icon 1",
"@icon_pin": "1"
},
{
"@icon_name": "Info Icon 2",
"@icon_pin": "2"
}
]
}
]
}
]
}
but my result is:
materials
[object Object]
how can I alternate my code so i will get the objects also when the loop
meets them?