How do I make twig's dump function to display the data unfolded?

Question

I'm using the dump function of the twig.

But it shows the data "folded", like in here:

When I click the arrow, I may reveal the data by unfolding it, like in here:

Question:

Is there any way to tell the twig or dump to directly display the objects fully-unfolded.

Denominate

You mean you don't want to be able to click it? Fully expanded I mean, and it doesn't collapse? – Raseta

Not really. I am ok with it being "foldable". But I plan to display complex objects about 5 or 6 level deep, with about 3 to 5 properties per level. Fully expand the object would easily be 10 or 20 clicks. And I wanted to show all the data at once, instead of requiring the user to click on everything. So the question focuses on show it all "without requiring the user to click" and it is not about on how "prevent the user to click". – Denominate

Answer 1

You can do this with javascript (jQuery):

    // Expand all dump levels of all sf-dumps on a page.
    $("pre.sf-dump").each(function() {
        $(this).find("a.sf-dump-toggle:gt(0)").each(function(i, a){
            a.click();
        });
    })

This simulates the user clicking each dump toggle (excluding the first one with gt(0)) of each sf-dump on a page.

Edit: I added an each() function to make the script work for any number of sf-dumps there might be on a page. Thanks to @Xavi

Colton

Okey, thanks for the tip! This works only if there is one dump per page, but does not if there are several. Taking your answer as base, I modified the selector to open "all the arrows" except for those that are "the first level" with $( "a.sf-dump-toggle" ).not( "pre.sf-dump > a.sf-dump-toggle" ).each( [...] - Please incorporate this to your answer in order to select it and upvote it. – Denominate

I adjusted the script, a little different from your version but they are both good I think :) – Colton

Answer 2

A quick way could be to add this in your css:

pre.sf-dump .sf-dump-compact {
    display: block;
}

The arrows wouldn't work anymore though. But you can hide them with this css rule if you don't care about toggling:

.sf-dump-toggle {
    display: none;
}

Fretful

Answer 3

once you have dumped the data, you have to ctrl + left click on the root node

Edelstein

Answer 4

You can create your own dumper service and make twig use it instead of the one the twig-bridge extension uses by default.

First, create your own service class, extending the actual :

namespace App\Services;

use Symfony\Component\VarDumper\Dumper\HtmlDumper;

class MyHtmlDumper extends HtmlDumper
{
    public function __construct($output = null, string $charset = null, int $flags = 0) {
        parent::__construct($output, $charset, $flags);
        $this->setDisplayOptions(['maxDepth' => 3]);
    }
}

Second, make twig-bridge use it. In services.yaml, add under services::

    var_dumper.html_dumper: '@App\Services\MyHtmlDumper'

And that's all !

You can choose another value for maxDepth, or change other options.

Pyretotherapy

Working! With Sf 3.4, I had to declare service as follow, though: var_dumper.html_dumper:############### class: 'AppBundle\Twig\CustomHtmlDumper' – Faludi

Answer 5

To make objects dump completely collapsed, use this jQuery snippet:

$(".sf-dump-expanded").removeClass("sf-dump-expanded").addClass("sf-dump-compact");

Potpie

Answer 6

Edit : This is for the php dump() function. For the twig one, see my other answer.

For affecting the php dump() function you can set the display options of the var dumper :

VarDumper::setHandler(function ($var) {
    $cloner = new VarCloner();
    $dumper = 'cli' === PHP_SAPI ? new CliDumper() : new HtmlDumper();
    $dumper->setDisplayOptions(['maxDepth' => 3]);     

    $dumper->dump($cloner->cloneVar($var));
});

See https://symfony.com/doc/current/components/var_dumper/advanced.html

Pyretotherapy

I think this does not work when using {{ dump() }} in a twig view – Faludi

You're right ! Edited, and another answer added, thanks – Pyretotherapy

Answer 7

I'm not sure what you are showing in your pictures, but let's say for example it is a Tour Entity. Then you can access with your setters and getters and display in dump. So in the above you have a picture showing the Tour object and dumping it in Twig. The Tour Entity probably has a getTourId() type method.

So to show in your twig, you can do like this:

{{ dump(tour.getTourId) }}

When you see multiple levels, then it's probably an array collection. Then you would need to get the sub Entity can call it's method. Let's say a Tour Entity, has a collection of Dates (a Date Entity), and maybe the Date entity has a getDate() function.

So then you would call like so:

{{ dump(tour.getDate[0].getDate) }}

Where getDate[0] is the first element in the array collection of Dates in the Tour object. The element is an object, so you call it's method getDate.

This is how things are done in Twig. It's all object based, and very easy to use. Normally dump is not used. You don't want to use it in a Production environment, because you may get users seeing the famous 500 error page.

Raseta