To give context to the issue:

I am using GraphQL to call product variants attributes (product variant colors) to the catalog page for each product that is displayed there.

Then I am processing the data and I am trying to assign each color variant to its respectable product.

I am matching it against the product entity ID, which I have written out in HTML datasets.

The issue: It assigns each color to each product, you can see it live here: https://zebreo.com/shop/, the red and purple should be only for the product on the left and the blue and yellow should be only for the product on the right.

Here is my code:

      if (data) {


            const products = data.site.route.node.products.edges.map( item => {
                const product = item.node;
                const options = product.productOptions.edges;
                product.productOptions = options.map(item => item.node).filter((i) => i.displayName === 'Color');
                return product;
            });

            var array = [];
            $('[data-entity-id]').each(function () {
                array.push(parseInt($(this).attr("data-entity-id")));
            });

            const productIds = products.map(x => x.entityId);
            const filtered = productIds.filter(i => array.indexOf(i) !== -1);
            const productColor = products.map(y => y.productOptions[0].values.edges);

            const fragment = document.createDocumentFragment();
            this.productColors.html('');

            var appended = false;


            products.forEach((product, index) => {

                const id = product.entityId;
                const hex = product.productOptions[0].values.edges.map(node => node.node.hexColors[0]);


                const matched = array.find((element,index) => {
                    return element === id;
                });
                console.log(this.context);

                    hex.forEach((code,index) => {

                        const linkNode = document.createElement('span');
                        linkNode.className = 'product-swatch';

                        linkNode.setAttribute('style', `background: ${code};`);
                        fragment.append(linkNode);


                        this.productColors.append(fragment);
                        // const target = document.querySelector('[data-entity-id] .card-body');
                        // target.append(fragment);

                    });

             });
     }

I can't figure out, how I should construct it. Since I need to loop through each product, to actually get the entityID, which I then match against the dataset ID, which I want to use to assign the correct colors from the response to the respective product.

But then, at the same time, I also have to do a loop through each HEX color code from the response, and create a span element from it and then assign the color to its style attribute.

Any tips will be helpful.

Thank you!