Cómo obtener datos de twig para un script de JS

18 Jun, 2023 Programación 0

Estoy tratando de obtener datos para un script de JS que es un modal que muestra los datos contenidos en un objeto Folder.

Creé un controlador para mostrar el objeto Folder en una vista de twig.

En mi vista de twig puedo listar cada elemento hijo (entidad) de Folder sin ningún problema:
bars, bars, quxes (tableros, categorías, elementos)

El objeto Folder se muestra como una tarjeta HTML con pestañas para los elementos secundarios:
bars, bars, quxes (tableros, categorías, elementos)

En la pestaña Boards tengo un for loop que muestra los elementos incluidos.

Si elijo uno de los elementos, abro un modal que muestra el nombre y la descripción.

La pregunta es: ¿cómo construir en JS, una variable para el nombre del Board: barname y otra para la descripción: bardescription para ser leída en mi modal?

Ya he creado un servicio twig “menubar” para acceder a los datos que uso desde un menú lateral donde muestro las Folders (foo) para mostrar la Folder seleccionada.

Para mostrar la Folder seleccionada con elementos incluidos: Boards ⇒ Categorías ⇒ Elementos por pestañas.

Código PHP y Twig aquí

davy.ai

June 18, 2023 at 5:36 am

Para construir las variables requeridas barname y bardescription en JavaScript para leerse en el modal, necesitamos acceder al objeto Bar seleccionado y obtener sus atributos name y description.

Primero, podemos agregar un atributo de datos a cada botón en la plantilla Twig para almacenar el id del objeto Bar correspondiente:

{% for bar in foo. bares %}

        <button type="button" class="alert_demo_2 btn btn-secondary" data-bar-id="{{ bar.id }}">{{ bar.name }}</button>

{% endfor %}

Luego, en el código de JavaScript, podemos escuchar el evento de clic en estos botones y obtener el objeto Bar correspondiente al botón hecho clic usando una llamada AJAX al servidor:

$('.alert_demo_2').click(function (e) {
    var barId = $(this).data('barId');
    $.ajax({
        url: '/bar/' + barId + '/get',
        method: 'GET',
        success: function (bar) {
            swal(bar.name, bar.description, {
                buttons: {
                    confirm: {
                        className : 'btn btn-success'
                    }
                }
            });
        }
    });
});

En este ejemplo, asumimos que hay un controlador BarController con una acción get que devuelve un objeto Bar específico usando su id:

class BarController extends AbstractController
{
    /**
     * @Route("/{id}/get", name="bar_get", methods={"GET"})
     */
    public function get(Bar $bar): JsonResponse
    {
        return $this->json($bar, 200, [], ['groups' => 'api']);
    }
}

Finalmente, en la clase de entidad Bar, necesitamos agregar un grupo de serialización a los atributos name y description:

/**
 * @ORM\Entity(repositoryClass=BarRepository::class)
 * @Serializer\Groups({"api"})
 */
class Bar
{
    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     * @Serializer\Groups({"api"})
     */
    private ?int $id = null;

    /**
     * @ORM\Column(type="string", length=255)
     * @Serializer\Groups({"api"})
     */
    #[Assert\NotBlank]
    #[Assert\Length(min: 2)]
    private string $name;

    /**
     * @ORM\Column(type="text", nullable=true)
     * @Serializer\Groups({"api"})
     */
    private $description;

    // ...
}

Con estos cambios, cuando un usuario hace clic en un botón en la pestaña “Bar”, BarController recuperará el objeto Bar correspondiente y lo devolverá como una respuesta JSON. El código de JavaScript luego extraerá los atributos name y description de la respuesta y los usará para mostrar el modal.

es.davy.ai

¿Tienes una pregunta?

Cómo obtener datos de twig para un script de JS

Answer

davy.ai