Unable to covert Json string to Array on twig in my plugin development, located in a partial.htm

Hi Everyone!

I’m facing an issue with solving this puzzle… I created a component that retrieves data from a database based on the value of a hidden input (id value) and used the ajax form of octobercms, it displays the results in a <div id="popup"></div>, this html tag is connected to a partial (popup.htm) inside the plugin component. The only problem I’m currently facing is that I’m trying to retrieve different types of data (arrays and strings) from the database and display them all under a simple php variable inside a partial.htm. Currently I am unable to decode the json string to an array (with twig filter json_encode) if I mainly focus on only retrieving strings from the database, because it automatically converts the values of the repeater widget into a json string, instead of an array. I do manage to convert the data of the repeater widget into an array, but then I’m unable to retrieve the other data from the database.
Might there be a way to pass PHP variables to a partial.htm file of a component (like separating arrays from simple strings) or perhaps there is another way to do this better on PHP rather than taking the road in converting the Json string to array on Javascript?

In my components folder, Plan.php

<?php namespace Morgana\Plans\Components;

use Cms\Classes\ComponentBase;
use System\Classes\CombineAssets;
use Morgana\Plans\Models\Plan;
use Db;
use Input;

/**
 * Popup Component
 */
class Plans extends ComponentBase{
    
    public function componentDetails(){
        return [
            'name' => 'Plan Popup',
            'description' => 'Displays a popup with the plan details'
        ];
    }

    public function onRun(){
       $this->plans = $this->loadPlans();

       $this->addCss('/plugins/morgana/plans/assets/plans.css','core');
    }
    
    protected function loadPlans() {
        return Plan::all();
    }

    public function onClick(){
        return ['#popup' => $this->renderPartial('@popup.htm')];  
    }
    
    public function details(){
        $id = Input::get('plan');
        $details = Db::table('morgana_plans')->where('id', $id)->get();
        $list = Db::table('morgana_plans')->where('id', $id)->lists('accordion');

        
        return $details;
        
       # works for retrieving data from the repeater widget.
       # foreach ($list as $item) {
           #return json_decode($item);
       # }

    }
    
    public $plans;
}

and in components/plans/default.htm

{% set plans = __SELF__.plans %}

<div class="plans">

{% for plan in plans %}
            <figure>
                <img src="{{plan.img_front|media}}" alt="{{plan.plan}}">
                <figcaption><h3>{{plan.plan}}</h3></figcaption>
                
                {{ form_ajax('onClick') }}
                    <input name="plan" type="hidden" value="{{plan.id}}">
                    <button type="submit">VER DETALLES</button>
                {{ form_close() }}
            </figure>
{%endfor%}
 </div>

<div id ="popup"></div>

in components/plans/popup,htm (the partial file)

{% set plan_details = __SELF__.details %}

{% for plan in plan_details %}
<div class="text">
<hgroup>
    <h3>{{plan.subtitle ? plan.subtitle : "Asistencias y Beneficios de este Plan" }}</h3>
    <h2>{{plan.plan}}</h2>
</hgroup>
    <p>{{plan.description ? plan.description : "no description"}}</p>
    
</div>
{%endfor%}

<!-- used for retrieving the json data
{% for plan in plan_details %}
    {{plan.title}}
    {{plan.listing|raw}}
{%endfor%}
-->