0

With Symfony 5.4, I need to create a "load more" button, to retrieve via an Ajax request the next 12 records in Json. I'm not very strong in JavaScript, but I learned the basics.

For that, it's ok, but I'm having trouble with the template, because I'd like to use Twig's variables and functions with JavaScript, and I can't.

Before adding this feature, I was only working with PHP objects, so I could easily use Twig functions like path(), asset()... I was also using a Voter to determine if I display an edit button to the user, like this :

{% if is_granted('FIGURE_EDIT', figure) %}
    <a href="{{ path('app_figure_edit', {'id': figure.id, 'slug': figure.slug}) }}" class="btn btn-outline-primary btn-sm" title="Modifier cette figure">
        <i class="bi bi-pencil"></i>
    </a>
{% endif %}

But now I get data in Json instead of a collection of objects :

{
    "id": 63,
    "name": "Aenean nec ornare",
    "createdAt": "2022-05-28T11:22:14+00:00",
    "status": "status.accepted",
    "slug": "aenean-nec-ornare",
    "userId": 10,
    "userIdentifier": "Admin",
    "firstFigureImage": "400-629205e619369.jpg",
    "categoryName": "intermédiaire",
    "categorySlug": "intermediaire"
  },

So I can't use Twig's functions like before. My first thought was to loop over the Json in Javascript to display the info, for example like this :

function appendData(data) {

            var container = document.getElementById('figures-grid');
            var HTML = ``;

            for (let i = 0; i < data.length; i++) {

                HTML += `
                <div class="col">
                    <div class="card h-100">
                        <a href="/figure/show/` + data[i].id + `-` + data[i].slug + `">
                            <img class="card-img-top" src="/uploads/images/` + data[i].firstFigureImage + `">
                        </a>

                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="/figure/show/` + data[i].id + `-` + data[i].slug + `">
                                    ` + data[i].name + `
                                </a>
                            </h5>
                        </div>
                    </div>
                </div>
                `;
            }
            index++;
            container.innerHTML += HTML;
}

This way works if I just need to display text, using data[i].myProperty, but when we need the dynamism of Twig/PHP, it's impossible : we can't write Twig code inside a JS variable, it doesn't work, and moreover, it's too late since the server has already processed the display. In any case, I don't find this way very clean.

I think I'm on the wrong track. What would be a good way to process and display these Json records on a Twig template?

Loraga
  • 77
  • 3
  • 12
  • Do you know about [`json_decode()`](https://www.php.net/manual/en/function.json-decode.php) So use it to convert the JSON String into a PHP Array or Object ... – RiggsFolly Jun 06 '22 at 08:09
  • My controller returns Json, which is then processed by Javascript to be displayed instantly, without reloading the page. When do I have to convert the Json back to PHP? I don't understand this – Loraga Jun 06 '22 at 08:16
  • When you receive it in the PHP code, in your controller probably before passing it to the Twig code – RiggsFolly Jun 06 '22 at 08:17

0 Answers0