How can I display different content for product variants in metafields?

[basti9422]

Hello, I want different content to be displayed when switching the product variant. These are stored in a metafield as multi_line_text_field. Now I have tried to convert the content to json. But now only [object,Object] is displayed on the page.

code:

{% if variant.metafields.global.tab1name != blank %}
<div class="product-block product-block--tab">
<div class="collapsibles-wrapper">
<button type="button"
class="label collapsible-trigger collapsible-trigger-btn collapsible-trigger-btn--borders collapsible--auto-height{% if force_open %} is-open{% endif %}" aria-controls="Product-content-tab1name"
{% if force_open %}aria-expanded="true"{% endif %}>
{{ variant.metafields.global.tab1name }}
{%- render 'collapsible-icons' -%}
</button>
<div id="Product-content-tab1name"
class="collapsible-content collapsible-content--all{% if force_open %} is-open{% endif %}"
{% if force_open %}style="height: auto;"{% endif %}>
<div id="tab1inhalt" class="collapsible-content__inner rte" style="word-break: break-word;">
</div>

{% capture 'meta_data_tab1inhalt' %}
{% for variant in product.variants %}
{{variant.id}}:{{ variant.metafields.global.tab1inhalt | json }}
{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}


<script>
const metaDataTab1inhalt = { {{ meta_data_tab1inhalt }} };
console.log(typeof metaDataTab1inhalt);
const tab1inhalt = (id) => {
var selector3 = document.querySelector('#tab1inhalt');
if (metaDataTab1inhalt[id]) {
selector3.innerHTML = metaDataTab1inhalt[id];
console.log(typeof metaDataTab1inhalt[id]);
}
}
tab1inhalt(currentVariantId);
</script>
</div>
</div>
</div>
{% endif %}