如何从中创建JavaScript选项卡以遍历JavaScript对象？

Question

我具有这样的Tab设计。 Fiddle

这是我的JavaScript对象示例。选项卡的标题将由该JavaScript对象的类别组成。但是某些产品具有两个类别，则该产品将位于这两个类别内。抱歉，很复杂。我得写得快一点。

如何迭代类别和产品并整合此标签？

例如

标签1 =咖啡

Content = Product1，Product3，Product7

var product = [{
        "product_name": "Product 1",
        "product_id": "8991",
        "product_price": "$69",
        categories: [{
            categoryName: 'Tea'
        }, {
            categoryName: 'Coffee'
        }],

    },

    {
        "product_name": "Product 2",
        "product_id": "8951",
        "product_price": "29 TL",
        categories: [{
            categoryName: 'Tea'
        }]


    },
    {
        "product_name": "Product 3",
        "product_id": "8941",
        "product_new_price": "79 TL",
        categories: [{
            categoryName: 'Gift'
        }, {
            categoryName: 'Coffee'
        }],




    },
    {
        "product_name": "Product 4",
        "product_id": "8931",
        "product_new_price": "39 TL",
        categories: [{
            categoryName: 'Gift'
        }, {
            categoryName: 'Tea'
        }],



    },
    {
        "product_name": "Product 5",
        "product_id": "8911",
        "product_new_price": "49 TL",
        categories: [{
            categoryName: 'Gift'
        }],



    },
    {
        "product_name": "Product 6",
        "product_id": "8971",
        "product_old_price": "89 TL",
        "product_new_price": "59 TL",
        categories: [{
            categoryName: 'Toys'
        }, {
            categoryName: 'Gift'
        }, {
            categoryName: 'Tea'
        }],


    },
    {
        "product_name": "Product 7",
        "product_id": "8921",
        "product_new_price": "69 TL",
        categories: [{
            categoryName: 'Coffe'
        }, {
            categoryName: 'Kahve'
        }],


    },
    {
        "product_name": "Product 8",
        "product_id": "8431",
        "product_new_price": "19 TL",
        "categories": "Food"


    }
    ];

Answer 1

为带有类别名称的选项卡添加属性数据。单击选项卡时，将获得属性值并使用该函数来获取产品

function getProducts(products = [], categoryName = 'Gift') {
    let result = [];

    for (let product of products) {
        if (product.categories === undefined || !Array.isArray(product.categories)) {
            break;
        }

        for (let category of product.categories) {
            if (category.categoryName === categoryName) {
                result.push(product);
                break;
            }
        }
    }

    return result;
}

然后将接收到的数据粘贴到内容中