Pass an already fetched JSON data to Alpine

[zkwbbr]

Usually I can get JSON data using x-init="myData = await (await fetch('/path/to/json')).json();" but what if the JSON data is already fetched previously using vanilla JS? e.g.,

let jsondata = '';
let apiUrl = 'https://jsonplaceholder.typicode.com/posts/1'

async function getJson(url) {
	let response = await fetch(url)
	let data = await response.json()
	return data
}

async function main() {		
	let jsondata = await getJson(apiUrl)

	// how can I pass jsondata to Alpine from here?
}

main();

[MichaelMackus]

You should be able to use a $store to pass the JSON from the outside to any components using the store.

https://alpinejs.dev/globals/alpine-store

For example:

Alpine.store('jsonData', { product: null });

async function main() {
	let jsondata = await getJson(apiUrl)
        Alpine.store('jsonData').product = jsonData;
}

Then you can reference it in your component via the $store magic. I haven't tested the above code but that's the general understanding I get from the docs. Keep in mind this is a "global" store so all alpine will be able to access the data, but if you want more encapsulation perhaps you'd want to look into reactivity docs.

[zkwbbr]

@MichaelMackus Thanks for the reply. I have actually been trying out store but couldn't get it to work. Here's an example: https://jsfiddle.net/k7ymo3cg/1/

You can see in the console log that the data is being fetched but it's not getting "stored" by Alpine.

[MichaelMackus]

@zkwbbr that actually appears to be working for me. For some reason jsfiddle isn't hot-reloading the alpine.js content correctly, but when I do a Ctrl+Shift+r reload in chrome I see the name in the document:

[zkwbbr]

@MichaelMackus well that is weird. I tested it Chrome/Firefox, it some times appear after several refresh. Looks like a bug?

[MichaelMackus]

I think it is just a side effect from jsfiddle. I noticed the same thing with a few other hot-reloading scripts. It should work just fine in production/html use though I'd guess.

[zkwbbr]

I tested it in actual Chrome and Firefox (not inside jfiddle) and it does not work.
Does it work on your end outside of jfiddle?

[SimoTod]

Your code won't work. You have 2 async operations (alpine:init and the main task) and you don't know which one will arrive first (likely alpine since the other one is an http call, which is the reason why your code doesn't work 80% of the time).
You need to call main inside the Alpine:init callback either before the store waiting for it (not advised) or you set the store property as empty, call main and, in the main function you override the propeety.

[zkwbbr]

That works, thank you!