Как создать JavaScript вкладок для итерации по JavaScript объекту?

Question

У меня такой дизайн вкладок. Fiddle

И это мой JavaScript Пример объекта. Названия вкладок будут состоять из категорий этого JavaScript объекта. Но у некоторого товара есть две категории, и тогда этот товар будет внутри этой двух категорий. Извините, если это сложно. Мне пришлось написать немного быстро.

Как перебрать категорию и товар и интегрировать эти вкладки?

Например,

Вкладки1 = Кофе

Содержимое = Продукт1, Продукт3, Продукт7

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;
}

Затем вставляете полученные данные в содержимое