Alright, this is a relatively new edition of livewire four and something I've wanted for a long time and it's gonna make it so easy for you to fetch JSON from your livewire component inside your livewire components JavaScript. And there's a lot of cool little features and power baked into it. It's gonna unlock a lot. So when do you need something like this? Well, maybe you have a third party library on your page,

So when do you need something like this? Well, maybe you have a third party library on your page, like a charting library or a select library that consumes JSON. So you need to fetch some JSON. So what do you do? Well, maybe you add a controller and a separate endpoint called API slash whatever. Well we don't need to do that anymore because live wear gives us some cool stuff. So for our example, this edit post component,

because live wear gives us some cool stuff. So for our example, this edit post component, we're gonna add a tag select using the Tom Select third party library that consumes JSON. We're gonna add a tag select so that a user can search through some tags and apply it to the post. And that's gonna be our little problem or puzzle for this, uh, for this episode. Okay, so the first thing I wanna do is before we even implement the actual select,

Okay, so the first thing I wanna do is before we even implement the actual select, I just wanna show you what JSON can do and how you use it. So let's say public function get tags and we're gonna say query equals empty string. And then in here we're gonna add a where like statement on the tag model. Okay? So we're saying search through the tags where the name is, like whatever query was passed in and just return the results.

where the name is, like whatever query was passed in and just return the results. And here's where the magic comes in. You add this attribute called JSON. And what does this do? It does a few things. It makes it so that calling this is asynchronous. So if you're fetching JSON from your component, it's not gonna hold up the rest of your component. You can still interact with it anywhere else you want to. Also, it is going to skip the render of the component.

You can still interact with it anywhere else you want to. Also, it is going to skip the render of the component. It's not gonna re-render your whole component. It's just like this is its own little dedicated endpoint. And then third, it has its own error handling. So if you throw any validation errors inside of here, it's separate from your whole component and it's going to return those in the promise. So the promise will throw or you can do catch in the promise and get that airbag from this method

So the promise will throw or you can do catch in the promise and get that airbag from this method and do whatever you want with it just like you would if it was an endpoint. Okay, so we have got tags. Let me show you it in the dev tools. Okay, so we open up the dev tools and we're gonna say let dollar dollar sign wire equal livewire first. If you haven't seen livewire first, it's just like, hey,

livewire first. If you haven't seen livewire first, it's just like, hey, get me the dollar sign wire or the JavaScript object of the first component on the page. And now we can say let results equal await. Okay? And now dollar sign wire get tags and we won't pass a query. We'll just say get all the tags. Okay, we execute it a request got sent to the server. But look at results, it's pure JSON. It's just a, a plain old object in JavaScript full

But look at results, it's pure JSON. It's just a, a plain old object in JavaScript full of all those model details. Ready and waiting for you to do whatever you want with, which is really, really awesome. Alright, so let's add in this Tom Select input. We'll wire it up and then we'll use that JSO to fill up the, to select as a user types. Okay, so Tom Select needs an input element to bind itself to.

Okay, so Tom Select needs an input element to bind itself to. So we'll throw an input element here and then we'll say wire ref and we'll call this tags so that we can get that element outta the page. Alright, so that's the first step. Second step is we need to import the assets for Tom Select. So it is its own JavaScript and its own CSS. So we say assets and assets here,

So it is its own JavaScript and its own CSS. So we say assets and assets here, this is in live wire two or three or something. It's really handy. All JavaScript down here is gonna load every time the component is initialized on the page, which is very useful. But assets is like, this is where you'd put any CDN stuff, any styling things that you want just for this component. And it'll make sure that these assets are included in the head of your layout so that they're ready

And it'll make sure that these assets are included in the head of your layout so that they're ready and available for you if you need to use them inside script. So let's add the TOM Select stuff here. Okay, so this is the CDN link to its styles and the CDN link to its JavaScript. And now we can actually use Tom Select and this is how you use it. It's a global JavaScript or function or constructor or something, a class that we can initialize

It's a global JavaScript or function or constructor or something, a class that we can initialize by passing in a a selector A CSS selector or an actual DOM element. So we'll get the DOM element with refs, do tags 'cause we added that ref. And then you pass in some objects like what field in the JSON should we use for the value? Well the id, what about the label? We'll say name. When we're searching, what do we search on?

Well the id, what about the label? We'll say name. When we're searching, what do we search on? We'll also say name. And then down here is where you actually load the results from the server. And for now I'll just console log out query just so you can see it that as we type, it's calling this callback. Okay, so now we should have it initialized on the page and we do.

Okay, so now we should have it initialized on the page and we do. And now if I type in here, okay, I just typed LI and it console logged li and now it's just hanging, it's just waiting for us to give it some results. So let's give it some, this is where normally you would say like fetch and then you'd have your endpoint like API slash tags and you'd wire up all that complicated stuff

and then you'd have your endpoint like API slash tags and you'd wire up all that complicated stuff and you know, whatever. We don't have to do that here. We can just say this. Get tags. And you saw that you can always use async a weight. Like you could say something like this but for to select, I don't even know if we can make this an async function. I'm not sure if you're even that familiar

I don't even know if we can make this an async function. I'm not sure if you're even that familiar with JavaScript async functions. So we'll use the more traditional get tags, pass it in the query and use do then and dot catch. So let's say dot then and we'll say tags. Okay, so now we have that tags json and we can just pass that straight into Tom Select. And then after that we can say catch. So if there's any errors we'll just call the empty callback.

And then after that we can say catch. So if there's any errors we'll just call the empty callback. So we'll say just kind of bail out if there's any error for any reason. All right, we refresh, I type li it's searching, it has live wire, I hit backspace, I just type L and it's searching for everything that has an L in it and I can just select these as I want. I could search alpine and select alpine. So there you go. You can see the power here with this JSON attribute.

I could search alpine and select alpine. So there you go. You can see the power here with this JSON attribute. So anytime that you need JSON from your component, you pop this in here and you do whatever you want in here and you're gonna get back everything you need with this really, really simple method. Call one last bit to show you, let's say we failed some validation in here. So like, let's make a validator, we'll say validator, we'll import the facade, okay?

So like, let's make a validator, we'll say validator, we'll import the facade, okay? And we'll say make and then we'll just say like fu, I don't know, we're just gonna make a, a validator that fails. There's probably an easier way to do this, but I don't remember it offhand. So FU is required and FU is empty. Okay? Uh, we could actually just chain it right on, right? And then validate. Okay, so this is just a validator

Uh, we could actually just chain it right on, right? And then validate. Okay, so this is just a validator that's built to fail, right? So that when we call get tags, it's just gonna fail down here you can access a bunch of interesting stuff. Like you can access the status code, you could access the error bag or anything you want. So watch this. If I console dot log status and errors, let's see what happens with that JS ON endpoint. Okay? So I type in something,

and errors, let's see what happens with that JS ON endpoint. Okay? So I type in something, it's gonna throw a validation error, it did and it gave us the status code. A 4, 2, 2 is the validation status code. And then it gave us an object of that error bag. Fu the FU field is required. So now you can do whatever you want inside here. You could render a custom error message. You could do something with Tom. Select whatever you want.

You could render a custom error message. You could do something with Tom. Select whatever you want. It's extremely powerful. And uh, yeah, that's, uh, that's JSON for you.