Passing x-data (JSON) from php

[builtbybeluga]

I'm trying to pass data generated server side into x-data but hit an error when referencing JSON. Is there a simple solution to this? This isnt a livewire project, just PHP with alpine on the front end.

[SimoTod]

I assume you printed the json without escaping it so you generated something like <div x-data="{"foo": "bar"}">.
That is going to confuse the browser because of the multiple quotes (it will think that x-data is just "{").

you can use htmlspecialchars to escape the string when printing it out.

If that's not the issue, you need to post the generated HTML so people can replicate and try to help.

[builtbybeluga]

Thanks @SimoTod,

x-init="init('<?php echo htmlspecialchars(json_encode($kirby->collection('navigation-default'))); ?>')"

using this fixed my issue!

[netdesignr]

Working great!

[vdvcoder]

Now it's possible to use the @js directive.

Source: LINK

If ever you need to output PHP data for use in Alpine, you can now use the @js directive.

<div x-data="{ posts: @js($posts) }">
    ...
</div>