[英]How to use json data in html
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. 我有js文件
list.js
json,我试图从HTML文件index.html
获取数据。请告诉我如何将其与HTML连接。
Here's my json with js file: 这是我的带有js文件的json:
$(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.:( 想法是制作展开菜单以显示这些类型的动物-昆虫-蚂蚁,苍蝇,蜜蜂;哺乳动物-熊,鸭嘴兽,老虎;爬行动物-鳄鱼,乌龟;。请帮助,我是这个领域的新手。:(
This post explains very well you you can combine an external JSON file with an html file: How to read an external local JSON file in Javascript 这篇文章很好地说明了您可以将外部JSON文件与html文件结合使用: 如何在Javascript中读取外部本地JSON文件
However! 然而! What you are having is not an json file.
您所拥有的不是json文件。 What i would suggest is getting your JSON data, store it within its own file and use the .json extension and then follow the example shown in the post
我建议您获取JSON数据,将其存储在自己的文件中,并使用.json扩展名,然后按照文章中显示的示例进行操作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.