How to correctly filter and handle array-like structures in Shopify Liquid

I'm working on a Shopify store and need to filter blog articles based on specific handles and display them in a Swiper component. However, I'm having trouble correctly handling array-like structures in Liquid to achieve this. Here's the specific case I'm dealing with:

I need to filter a list of blog articles using an array of handles and display only the articles that match these handles. Below is my current Liquid code:

{{ "knowledge-hub-section.css" | asset_url | stylesheet_tag }}

{% assign blogs_handles = "5-best-materials-for-a-basketball-backboard,guide-to-installing-basketball-hoops-onto-brick-walls,4-tips-to-properly-maintain-a-basketball-hoop-base" | split: ',' %}
{% assign custom_articles = '' %}

{% for article in blogs["news"].articles %}
  {% if blogs_handles contains article.handle %}
    {% if custom_articles == '' %}
      {% assign custom_articles = article %}
    {% else %}
      {% assign custom_articles = custom_articles | append: ',' | append: article %}
    {% endif %}
  {% endif %}
{% endfor %}

Issues:

The articles do not seem to be displaying correctly.
Handling the custom_articles array and ensuring it properly stores and iterates over the filtered articles.

Desired Outcome: I want to filter blog articles using the handles specified in the blogs_handles array and display x properties of them.

What I've Tried:

Using the split filter to create an array of handles.
Iterating through the blog articles and appending matching articles to a custom_articles array.
Splitting the custom_articles string back into an array and iterating over it to render the articles.

Questions:

How can I correctly filter and store the articles in an array-like structure?
What is the best way to handle and iterate over these filtered articles in Liquid?

Solution

Filter Articles by Handles: We iterate through blogs["news"].articles and check if the article.handle is in the blogs_handles array. Store the Filtered Articles: We concatenate the handles of matching articles into a string (custom_articles) and then split this string back into an array (custom_articles_array). Display Articles in Swiper Component: We iterate over the custom_articles_array, find each article by its handle, and then display it within the Swiper component.

{{ "knowledge-hub-section.css" | asset_url | stylesheet_tag }}

{% assign blogs_handles = "5-best-materials-for-a-basketball-backboard,guide-to-installing-basketball-hoops-onto-brick-walls,4-tips-to-properly-maintain-a-basketball-hoop-base" | split: ',' %}
{% assign custom_articles = '' %}
{% assign custom_articles_array = '' %}

{% for article in blogs["news"].articles %}
  {% if blogs_handles contains article.handle %}
    {% if custom_articles == '' %}
      {% assign custom_articles = article %}
    {% else %}
      {% assign custom_articles = custom_articles | append: ',' | append: article %}
    {% endif %}
  {% endif %}
{% endfor %}

{% assign custom_articles_array = custom_articles | split: ',' %}

<div class="swiper-container">
  <div class="swiper-wrapper">
    {% for handle in custom_articles_array %}
      {% assign article = blogs["news"].articles | where: "handle", handle | first %}
      {% if article %}
        <div class="swiper-slide">
          <h2>{{ article.title }}</h2>
          <p>{{ article.excerpt }}</p>
          <a href="{{ article.url }}">Read more</a>
        </div>
      {% endif %}
    {% endfor %}
  </div>
  <!-- Add Swiper navigation buttons -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<!-- Include Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>