Magento2 - Get ID for simple product which is associated to configurable product on product listing page

Question

I want to pass product id in a rel tag in the swatch-option class which is on the listing page for swatches.

I am aware it has to be done via swatch-renderer.js but not able to do the code.

console.log($.widget.options);
                id = this.id;
                type = parseInt(optionConfig[id].type, 10);
                value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '';
                thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '';
                label = this.label ? this.label : '';
                attr =
                    ' id="' + controlId + '-item-' + id + '"' +
                    ' aria-checked="false"' +
                    ' aria-describedby="' + controlId + '"' +
                    ' tabindex="0"' +
                    ' option-type="' + type + '"' +
                    ' option-id="' + id + '"' +
                    ' option-label="' + label + '"' +
                    ' aria-label="' + label + '"' +
                    ' option-tooltip-thumb="' + thumb + '"' +
                    ' option-tooltip-value="' + value + '"' +
                    ' role="option"';

Answer 1

You will have to pass $widget in the Renderswatch option first like -

_RenderSwatchOptions: function (config, controlId, $widget) {

Then in the _RenderControls function update the swatch option function call with 3 arguements like -

options = $widget._RenderSwatchOptions(item, controlLabelId, $widget),

After this code will work -

                var relVal = '';
                $.each($widget.options.jsonConfig.attributes, function () {
                    var item = this;
                    if(item.id == config.id) {
                        $.each(item.options,function(){
                           // var option = this;
                            if(id == this.id) {
                                $.each(this.products,function (index, value) {
                                    relVal = value;
                                });
                             }

                        });
                    }
                });
                attr =
                ' id="' + controlId + '-item-' + id + '"' +
                ' aria-checked="false"' +
                ' aria-describedby="' + controlId + '"' +
                ' tabindex="0"' +
                ' option-type="' + type + '"' +
                ' option-id="' + id + '"' +
                ' option-label="' + label + '"' +
                ' aria-label="' + label + '"' +
                ' option-tooltip-thumb="' + thumb + '"' +
                ' option-tooltip-value="' + value + '"' +
                ' rel="' + relVal + '"' +
                ' role="option"';