I have json with js file list.js and I am trying to get the data from it in HTML file index.html.Tell me please how to connect it with HTML.
Here's my json with js file:
$(function () {
var categories = {
menu: [{
title: "animals",
children: [{
title: "insects",
children: [{
title: "ant",
title: "bee",
title: "fly"
}]
},
{
title: "mammals",
children: [{
title: "bear",
title: "platypus",
title: "tiger"
}]
},
{
title: "reptiles",
children: [{
title: "crocodile",
title: "turtle"
}]
}
]
},
{
title: "fruits",
children: [{
title: "apple",
title: "pineapple",
title: "pear"
}]
},
{
title: "vegetables",
children: [{
title: "potato",
title: "tomato",
title: "carrot"
}]
}]
};
var getMenuItem = function (itemData) {
var item = $("<li>")
.append(
$("<a>", {
html: itemData.title
}));
if (itemData.children) {
var childrenList = $("<ul>");
$.each(itemData.children, function () {
childrenList.append(getMenuItem(this));
});
item.append(childrenList);
}
return item;
};
var $menu = $("#menu");
$.each(categories.menu, function () {
$menu.append(
getMenuItem(this)
);
});
$menu.menu();
});
The idea is to make unfolding menu to show these types Animals-Insects-ant,fly,bee;Mammals-bear,platypus,tiger;Reptiles-crocodile,turtle;.Please help, I am new to this field.:(
