Issue with Dynamically Loading JSON Data in View Files

[arkdev1]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

No, this error is not related to views.

Is there an error in the console?

No

PHP Version

8.2.16

PowerGrid

5.4

Laravel

10.48

Livewire

3.4

Alpine JS

3.13.5

Theme

Tailwind 3.x, Tailwind 3.x with tailwind/forms

Describe the bug.

I am encountering an issue when attempting to dynamically load JSON data into a view file using the package Powergrid and mohsen1/json-formatter-js. Specifically, the JSON data is supposed to be rendered inside a div element identified by a class that includes the row ID (e.g., json-{{$row->id}}). The expected behavior is for the JSON data to be parsed and formatted using JSONFormatter and then appended to the corresponding div element.

problem.mov

To Reproduce...

No response

Extra information

Detail::make()
    ->view('tables.details.raw-data-json')
    ->params(['tablename' => 'pg:eventRefresh-'.$this->tableName])
    ->showCollapseIcon()
    ->collapseOthers(),


```html
<div class="p-2 bg-white border border-slate-200">
    <div class="json-{{$row->id}}"></div>
    @script
    <script>
        setTimeout(() => {
            const myJSON = JSON.parse(@js($row->json));
            const formatter = new window.JSONFormatter(myJSON);
            document.getElementsByClassName('json-{{$row->id}}')[0].appendChild(formatter.render());
        }, 50);
    </script>
    @endscript
</div>

I've tried with and without @script, same results.

[luanfreitasdev]

This could work if you created an element with alpinejs instead of sending it via @script. I don't believe it's a bug or lack of wire:key

[arkdev1]

Hi @luanfreitasdev,
so the <div class="json-{{$row->id}}"></div> should be alpinejs?

[luanfreitasdev]

No, you can do something like this: x-data "formatJson" and use the $ref of the alpine element, for example. But I'm not sure 😁

[arkdev1]

No, you can do something like this: x-data "formatJson" and use the $ref of the alpine element, for example. But I'm not sure 😁

My stupidity.
With AlpineJs all is resolved, thanks @luanfreitasdev

<div class="p-2 bg-white border border-slate-200">
    <div x-data="window.jsonFormatter({{$row->id}},'{{($row->json)}}')" class="p-2 bg-white border border-slate-200">
        <div x-ref="container"></div>
    </div>
</div>

in app.js

window.jsonFormatter = function (row_id, json) {
    return {
        init() {
            const rowId = row_id;
            const jsonData = JSON.parse(json);
            const formatter = new JSONFormatter(jsonData);
            this.$refs.container.appendChild(formatter.render());
        }
    }
}