Output issue with External API data filter with Twig

[referee]

Hi again,

I try to go deeper in my learning curve of using External API and Twig in Cornerstone. This time I tried to filter API data. From the output perspective, it seems like the code is right as I see the data I wanted to grab. However, there are some issues with the layout.

The Twig filter is in a header element, nested in a div, which is part of a column. Column functions as a Looper Provider, while Div serves as a Looper Consumer. My API endpoint has a Raw Request parameter that limits data to just the current year. My Twig recent records filter sets a dynamic start date to the previous month, enabling it to fetch all data from that date onward, including future dates.

The problem is that items in the array that don’t meet the requirements are still taking up space before the desired output items, leaving an empty Div. Please take a look at the screenshot or check one of the events at the development site in the right sidebar. If we activate the icon for the Header Element or color Div’s background, we can see how many empty items are there. How to get rid of them? If the array would have other events not included into the filter after the date range set I guess there would be the same problem below the filtered content output as well. It applies to other Cornerstone Elements, I think. Grid for instance.

Just in case, here is the code of my filter in Twig:

{% set current_month = date()|date('m') %}
{% set start_month = current_month - 1 %}
{% set array = [ looper.item.StartDate|date("m") ] %}
{% for v in array|filter(v => v >= start_month) -%}
        {{ looper.item.Name }}
{% endfor %}
{# outputs event names starting from the previous month #}

[referee]

Hello Team,
I am sorry to bother.

It is been a while already since I posted this issue but no answers yet. Is it still under review or it just slipped away from your attention somehow?

[charlie]

In your Twig code

This is only ever going to be a one item array. What are trying to do here? A range of months? See this thread here if that’s what your after.

{% set array = [ looper.item.StartDate|date("m") ] %}

Here I think you want to output {{ v }} not the looper.item.Name.

{% for v in array|filter(v => v >= start_month) -%}
        {{ looper.item.Name }}
{% endfor %}

[referee]

@charlie,

Thank you for returning back. I want to understand how to use filter with the API’s array to get data for a specific date range in this case.

I want to gather all the events starting from the previous month and later to display various information about them. I used event title field {{ looper.item.Name }} as an example to output them and also dates if you check my posted link in my initial request above. I just didn’t include the date field in my description of the case here. That is a kind of recent events widget I would say which for now shows up events for October and November of the current year. If we get to December that will be November and later etc.

I just try to use the same approach as in Themeco API videos when you add an element then add the filter key to show up only the data for filtered events and not for the whole array. Maybe it doesn’t work that way and that is why I get empty divs for filtered event titles and dates which are still sit in the array returned but don’t fit the filter requirement. In my case it is the Header Element which has the same filter but in the heading it returns event title and in the sub-heading it returns event dates.

[charlie]

Maybe a thought would be to use the Datetime condition instead of a Twig filter. {{ date.generic({"date":"- 1 month"}) }} would be last month. You can also use after or before in the datetime condition. That way you could also arrange the display of the data. Let me know if that helps.

[referee]

Hi Charlie,
I am not sure that I got the idea how to apply it. If I try to output {{ date.generic({"date":"- 1 month"}) }} I get a very strange number so I do not really understand what can I do with it to find a solution. Probably I am not on top of what you mean. Could you please explain it in more details?

If I compare {{ date.generic({"date":"-1 month","format":"d.m.Y"}) }} with {% for item in [looper.item.StartDate] %} {{item}}{% endfor %} nothing happens with the element with that condition, although they have the same format of the date.

Oh, I am sorry. Nothing happens in the back-end preview but on the front-end it works.

[charlie]

If you wanted to output the month. You would need to add the format to it. “m” being the month number. The element condition will do this for you and compare both dates. It’ll output the timestamp without the format.

{{ date.generic({"date":"- 1 month", "format": "m"}) }}

If you are only looping one item you don’t need the for loop. So use an if statement instead of the filter you were using. You can reference looper.item.StartDate to the month are you trying to compare to.

Have a great day.

[referee]

Great, Charlie.
Thank you for your help and the useful details for faster learning.

[tristup]

Hi John,

Glad that we are able to help you.

Thanks