Variable storing metafield path being rendered as string

[fernando28]

Hello there, everyone!

I'm trying to create a loop to generate 'rows' for a table using metafields for each of the data points. I know there's a tablerow loop in Liquid, however it won't work well with the current codebase since we're not able to use HTML tables due to very specific technical limitations.

That being the case, I'm trying to generate rows as divs dynamically using the forloop index as a variable on the metafields themselves, because the only thing that changes on the metafield handle for each datapoint is the number as you can see in the code below. That way the logic can be written once instead of having to do it in a super repetitive way (and also not dynamic).

The issue is that when the page is rendered, instead of rendering the value of the metafields themselves, it's rendering the metafield path as a string directly to the front end:

Here's my current code:

          {% assign rowLimit = product.metafields.global.row-count %}
          {% for i in (1..rowLimit) %}        
              {% capture tableLength %}
              product.metafields.global.table-length-{{ i }}
              {% endcapture %}
              {% capture tableWidth %}
              product.metafields.global.table-width-{{ i }}
              {% endcapture %}
              {% capture tableThickness %}
              product.metafields.global.table-thickness-{{ i }}
              {% endcapture %}
              {% capture tableVolume %}
              product.metafields.global.table-volume-{{ i }}
              {% endcapture %}

              {% if  tableLength %}
                  <div id="w-node-0ee9c7b704a0-ffe50a8f" class="table-row">
                    <div class="table-text">{{ tableLength }}</div>
                    <div class="table-text">{{ tableWidth }}</div>
                    <div class="table-text">{{ tableThickness }}</div>
                    <div class="table-text">{{ tableVolume }}</div>
                  </div>
              {% endif %}
          {% endfor %}

I believe the liquid variable is being processed and returning the variable's value as a string which is then the output to the browser. How can I process the value of the variable and then use it inside {{  }} for example to process the actual metafield path instead of a string?

I would really appreciate it if you would help me figure this out!

Thanks in advance and have a great day!

[Mircea_Piturca · Accepted solution]

Not tested but it should work:

{% assign key = 'table-thickness-' | append:  i %}
{{ product.metafields.global[key] }}

[fernando28]

Hello there, @Mircea_Piturca !

Thank you soooo much for your prompt reply : )

Your solution worked perfectly, I iddn't know I could encapsulate the variable that way!

The only thing I had to add was a dot after global to make this work perfectly!

Here's how the resulting code turned out in case any one is wondering:

          {% assign rowLimit = product.metafields.global.row-count %}
          {% for i in (1..rowLimit) %}        
              {% assign tableLength = 'table-length-' | append:i %}
              {% assign tableWidth = 'table-width-' | append:i %}
              {% assign tableThickness = 'table-thickness-' | append:i %}
              {% assign tableVolume = 'table-volume-' | append:i %}

			<div id="w-node-0ee9c7b704a0-ffe50a8f" class="table-row">
            	<div class="table-text">{{ product.metafields.global.[tableLength] }}</div>
				<div class="table-text">{{ product.metafields.global.[tableWidth] }}</div>
				<div class="table-text">{{ product.metafields.global.[tableThickness] }}</div>
				<div class="table-text">{{ product.metafields.global.[tableVolume] }}</div>
			</div>
          {% endfor %}

Thanks a million once again, @Mircea_Piturca !

Have a great one : )

[Mircea_Piturca]

Yes, Liquid is cool like that!

You can access object's properties by using the dot notation or the bracket notation. Same as in JS.

Happy to help out