Alpine: x-data valid JSON not working

[richgcook]

Not an issue, just a general question.

<div x-data="[JSON data object]">...</div>

Why wouldn't the below work if it's valid JSON? I get an Uncaught (in promise) SyntaxError: Unexpected token ')' error in the console.

x-data="{"liningweb-regular":{"className":".font-liningweb-regular"},"liningweb-oblique":{"className":".font-liningweb-oblique"}}"

[HugoDF]

Off the top of my head, isn't it an issue where the " matches the first one in the JSON instead of the end of the attribute?

[ryangjchandler]

Your JSON is closing the attribute value, you'll need to use properties without the double quotes I believe, like a regular object literal. Let me know how you get on :)

[richgcook]

Your JSON is closing the attribute value, you'll need to use properties without the double quotes I believe, like a regular object literal. Let me know how you get on :)

Ah okay. The data is coming from a DB via PHP (so using json_encode) so I think it isn't possible.

[ryangjchandler]

Your JSON is closing the attribute value, you'll need to use properties without the double quotes I believe, like a regular object literal. Let me know how you get on :)

Ah okay. The data is coming from a DB via PHP (so using json_encode) so I think it isn't possible.

Does escaping the quotes have any effect?

[richgcook]

Does escaping the quotes have any effect?

It does! Hmm. Trying to think what's the best way to get my data regular object literal from PHP.

[SimoTod]

You can also use single quotes as attribute delimiters if you know that your object is a valid json using double quotes.

x-data='{"foo": "bar"}'

[ryangjchandler]

Does escaping the quotes have any effect?

It does! Hmm. Trying to think what's the best way to get my data regular object literal from PHP.

An object literal wouldn't actually be possible with your data since you're using hyphens in your keys. You could change to be camelCase instead, or use underscores instead of hyphens.

The limitation with hyphens would be accessing your data in expressions, :class="liningweb-regular.className" wouldn't work I believe.

[richgcook]

The limitation with hyphens would be accessing your data in expressions, :class="liningweb-regular.className" wouldn't work I believe.

This makes sense.

If I had a simpler setup:

<div x-data="{
    activeTypeVariant: 'liningweb-regular'
}">

    <a
        href="#"
        x-on:click.prevent="
        activeTypeVariant == 'liningweb-regular'
    ">Regular</a>

        <div
            :class="{
                'activeTypeVariant': activeTypeVariant == 'liningweb-regular',
            }"
        ></div>

</div>

Is it possible to add whatever the activeTypeVariant value is as a class name?

[SimoTod]

Do you mean <div :class="activeTypeVariant"></div>?
It would print <div :class="activeTypeVariant" class="liningweb-regular"></div> in your case.

[richgcook]

Do you mean <div :class="activeTypeVariant"></div>?
It would print <div :class="activeTypeVariant" class="liningweb-regular"></div> in your case.

YES 😅

Thanks to everyone for the help.