使用json选择类别时，列出类别并显示子类别
使用json选择类别时，列出类别并显示子类别
提问于 2021-02-17 23:18:13
我用json做了一个这样的页面。我将我的测试示例添加到了文章底部的链接中。我用json这样列出了类别。但我还想要点别的东西。选择类别后，我希望在屏幕上显示所选类别的子类别，在同一页面上，可能在同一区域。我该怎么做呢？
这些是我作为示例添加的代码。你可以在文章的底部看到我准备的网站。
所以实际上当类别被选中时，我想在屏幕上显示子类别。
HTML
JAVASCRİPT
$(function() {
var people = [];
$.getJSON("category.json", function (data) {
$.each(data.cat_en, function(i, f) {
var tblRow = '' + ''+ ''+''+''+''+ ''+ f.cat_name + ''+ f.cat_product_count +'' + ''+ ''+''+''
$(tblRow).appendTo("#category")
})
})
})JSON
{
"cat_en" :
[
{
"cat_name": "Aluminum Components",
"cat_url": "#",
"cat_product_count": 29
},
{
"cat_name": "Gas Springs",
"cat_url": "#",
"cat_product_count": 75
},
{
"cat_name": "Lighting Parts",
"cat_url": "#",
"cat_product_count": 271
},
{
"cat_name": "Rear View Mirrors And Components",
"cat_url": "#",
"cat_product_count": 71
},
{
"cat_name": "Freezer And Components",
"cat_url": "#",
"cat_product_count": 22
},
{
"cat_name": "Upholstery fabrics",
"cat_url": "#",
"cat_product_count": 13
}
]
}演示站点
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-20 18:11:50
JSON
{
"cat_tr": [
{
"cat_name": "Product 1",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 29,
"cat_name_alt": [
{
"cat_name": "Product 1.1",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 1
},
{
"cat_name": "Product 1.2",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 22
}
]
},
{
"cat_name": "Product 2",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 75
},
{
"cat_name": "Product 3",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 271,
"cat_name_alt": [
{
"cat_name": "Product 3.1",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 30
},
{
"cat_name": "Product 3.2",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 40
}
]
},
{
"cat_name": "Product 4",
"cat_url": "#",
"cat_img": "img/product.png",
"cat_product_count": 71
}
]
}JS
$(function () {
var categories = [];
$.getJSON("category.json", function (data) {
categories = data.cat_tr;
$.each(categories, function (i, f) {
var cat_index = -1;
if (typeof f.cat_name_alt !== 'undefined' && f.cat_name_alt.length > 0) {
cat_index = i;
}
var tblRow = '' + '' + '' + '' + '' + '' + '' + '' + f.cat_name + '' + f.cat_product_count + '' + '' + '' + '' + ''
$(tblRow).appendTo("#cat_list")
});
});
$(document).on('click', '.grid_item', function (e) {
if ($(this).data('index') != -1) {
e.preventDefault();
$('#cat_list').html('');
var sub_categories = categories[parseInt($(this).data('index'))].cat_name_alt;
$.each(sub_categories, function (i, f) {
var cat_index = -1;
if (typeof f.cat_name_alt !== 'undefined' && f.cat_name_alt.length > 0) {
cat_index = i;
}
var tblRow = '' + '' + '' + '' + '' + '' + '' + '' + f.cat_name + '' + f.cat_product_count + '' + '' + '' + '' + ''
$(tblRow).appendTo("#cat_list")
});
}
});
})Stack Overflow用户
发布于 2021-02-19 20:53:16
如果我们假设存储在每个对象中的子类别，
{
"cat_name": "Aluminum Components",
"cat_url": "#",
"cat_product_count": 29,
"subcats": [
{
"cat_name": "First Subcategory",
"cat_url": "#"
},
{
"cat_name": "Second Subcategory",
"cat_url": "#"
}
]
}您可以尝试将该函数实现到您的代码中(我不了解JQuery，所以我用普通的JS编写)；
(categoryObject) => {
if (categoryObject.subcats.length > 0) {
var result = ""
categoryObject.subcats.forEach(
(subCategoryObject) => {
var template = `${subCategoryObject.cat_name}\n`
result += template
}
return result
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66244851
复制相关文章
相似问题
腾讯云开发者
