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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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;
}

Answer 5

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

Answer 6

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

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

Answer 7

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.