شرح درخواست :

سلام ، من می خوام دیتای یک فایل Json رو در HTML نمایش بدم .
این یه قطعه از اون فایل هست :
...............................................................................................................
{
"id": "7afd8f03-2798-476f-82b1-ff2f531d5fb7",
"properties": {
"stone_name": "rgewrg2eg",
"stone_size": "gerghwregw",
"stone_process": "ergrweg",
"stone_platen": "ergwrg",
"photo": "http://localhost/category/graniet/storage/images/7afd8f03-2798-476f-82b1-ff2f531d5fb7.jpeg"
}
},
{
"id": "b85b337d-4df2-42b6-aba4-dc5211e1f6a2",
"properties": {
"stone_name": "uikuktu",
"stone_size": ",.k.",
"stone_process": "yiluyluy",
"stone_platen": "y8oy7",
"photo": "http://localhost/category/graniet/storage/images/b85b337d-4df2-42b6-aba4-dc5211e1f6a2.jpeg"
}
}

...............................................................................................................


حالا من کد جاوااسکریپتی نیاز دارم که بتونم مقادر داخل properties رو نشون بدم ... قبلا یه کد مشابه پیدا کردم که این پایین آوردم :
ولی نمی تونم داخل properties رو نشون بدم ، فقط دیتای خارج از اون رو نشون میده
لطفا راهنمایی کنید

...............................................................................................................
fetch('data.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});

function appendData(data) {
var mainContainer = document.getElementById("category");
for (var i = 0; i < data.properties.length; i++) {



var StonePost = document.createElement("div");
StonePost.className = 'stone-type '+data[i].properties.stone_type;
StonePost.id = 'type';
StonePost.innerHTML = "

"+ data[i].stone_name + "

" + data[i].stone_size + " | " + data[i].stone_process + " | " + data[i].stone_platen + "

";
mainContainer.appendChild(StonePost);
}
}
...............................................................................................................