API array condition for showing / hiding a Single Tab inside Tabs Element

[referee]

Hi,

I use Tabs Element on a page. Each Tab contains different data from an External API. Condition for showing / hiding a Tab if some looper field is empty works fine. But I got stuck on hiding a Tab if a nested data array is empty not the particular field.

As an example I attach the picture of an API output here below where {{dc:looper:field key="Documents"}} doesn’t have any data sets inside. I need to hide the Documents Tab for such cases only. If there is some data inside that nested array Documents I need to show the Tab.

Please help.

[ruenel]

Hello Ian,

Thanks for writing in! have you check out our Conditions and Assignments documentation? Please check it here:

• https://theme.co/docs/conditions-and-assignments#using-expressions

Using the String Condition, you may use like {{dc:looper:field key="Documents"}} IS NOT empty (just leave the field) blank to display the Tab element when the field is not empty.

Hope this helps.

[referee]

Thanks for coming back @ruenel.
I have tested this option already, but unfortunately it always hides the Tab even if the nested array contains some data.

Here is an example of the event with no data in the Documents Tab.

Here is an example with another event which contains some data inside the Documents array.

And here are the settings of the condition for respective Tab.

[referee]

So as I said the conditions works fine with the fields but not with the nested arrays.

[charlie]

You can check if there is any data in the documents through using 0 to check the first array index. Then checking one of the fields like this.
{{dc:looper:field key="Documents.0.ID"}}

There is also a Twig filter called length that you could use to check if the Documents is greater than 0.
{{ looper.item.Documents | length }}

Let us know if that helps.

[referee]

Thank you @charlie,
Your second approach works fine for me.

This is already outside the initial topic but while experimenting with TWIG it seams like I noticed a bug which breaks preview of the content in Cornerstone. However I can not exactly tell the consequence when it happens. It looks something like on the following picture.

As you can see the syntax with == sign is correct and output on the front end works fine even when it happens. If you try to edit the page in Cornerstone further it dissapears after some manipulations with other element.

Here is my full syntax for that Header Element:

{% if {{dc:looper:field key="LevelID"}} == 10 and {{dc:looper:field key="CategoryID"}} == 2 %}
Городское спортивное мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 10 and {{dc:looper:field key="CategoryID"}} == 1 %}
Городское массовое мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 15 and {{dc:looper:field key="CategoryID"}} == 2 %}
Областное спортивное мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 15 and {{dc:looper:field key="CategoryID"}} == 1 %}
Областное массовое мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 20 and {{dc:looper:field key="CategoryID"}} == 2 %}
Спортивное мероприятие субъекта РФ
{% elseif {{dc:looper:field key="LevelID"}} == 20 and {{dc:looper:field key="CategoryID"}} == 1 %}
Массовое мероприятие субъекта РФ
{% elseif {{dc:looper:field key="LevelID"}} == 33 and {{dc:looper:field key="CategoryID"}} == 2 %}
Спортивное мероприятие федерального округа
{% elseif {{dc:looper:field key="LevelID"}} == 33 and {{dc:looper:field key="CategoryID"}} == 1 %}
Массовое мероприятие федерального округа
{% elseif {{dc:looper:field key="LevelID"}} == 40 and {{dc:looper:field key="CategoryID"}} == 2 %}
Спортивное всероссийское мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 40 and {{dc:looper:field key="CategoryID"}} == 1 %}
Массовое всероссийское мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 50 and {{dc:looper:field key="CategoryID"}} == 2 %}
Спортивное международное мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 50 and {{dc:looper:field key="CategoryID"}} == 1 %}
Массовое международное мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 60 and {{dc:looper:field key="CategoryID"}} == 2 %}
Спортивное континентальное мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 60 and {{dc:looper:field key="CategoryID"}} == 1 %}
Массовое континентальное мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 70 and {{dc:looper:field key="CategoryID"}} == 2 %}
Спортивное мировое мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 70 and {{dc:looper:field key="CategoryID"}} == 1 %}
Массовое мировое мероприятие
{% elseif {{dc:looper:field key="LevelID"}} == 10 and {{dc:looper:field key="EventTypeID"}} == 55 %}
Городской судейский семинар
{% elseif {{dc:looper:field key="LevelID"}} == 20 and {{dc:looper:field key="EventTypeID"}} == 55 %}
Региональный судейский семинар
{% elseif {{dc:looper:field key="LevelID"}} == 40 and {{dc:looper:field key="EventTypeID"}} == 55 %}
Всероссийский судейский семинар
{% else %}
Необходимо проверить LevelID и CategoryID
{% endif %}

[charlie]

Inner Dynamic Content works differently in Twig. What you are looking for is going to be similar to the below. Utilizing that data without additional {{}} when the Twig block has started.

{% if looper.item.LevelID == 10 and looper.item.CategoryID == 2 %}

[referee]

Thanks, @charlie!

This syntax is much more simple and looks better for non-coder. I do have additional question, however. Shall we use the same approach for conditions?

As an example, to get an item data from API I use “ID” field as a URL parameter that matches the event “ID” and it returns the array needed. Let’s say we need to determine whether to show or hide blocks based on the IDs. If it exists in the returned array, we show the contents and if it is not we show another block with an error message. If “ID” is empty it is easy to make a simple condition but if we need to compare the array data first against ID and only then make a decision what to show, I guess that Twig could help with that. In other words, we check if such an “ID” exists in all instances of our data array return or it is false statement. Can you suggest how to implement that?

[charlie]

It sounds like you need to loop if you need to check if an ID exists in an array. Then use a set statement to flag that you did in fact see that ID. I’m not 100% that’s what you’re looking for though. Have a great weekend.

[referee]

@charlie,

If we need to grab {{dc:url:param key=“ID”}} inside Twig expression how it shall be used there?

[ruenel]

Hey John,

With Twig enabled, you can use {{ url.param({"key":"ID"}) | default('123') }}.

Thanks.

[referee]

Thank you @ruenel, I will check that out.

[ruenel]

No problem, John.