You Won't Believe What Happens When You Use Set Filter in Xano!
Ray Deck shows how to use Xano's set filter with dot-path notation to modify nested JSON objects. He builds a reusable function that changes specific values deep inside complex data structures, like updating a color in a theme object, then saves the result back to your database.
Chapters
Let's talk about data surgery. Now, one of the things Xano does really well is the manipulation of complex data, uh, like that's turned into key-value pairs, dictionaries, lists, what have you, and being able to make modifications in ways that are going to be useful for your front end. And one thing that I sometimes hear is, how can I make changes to a relatively deep layered object here when I don't necessarily know in advance exactly where I'm going to be making the changes. Let's use an example. Here is a theme object from a frontend styling framework, which is saying, hey, that when I've got my light theme, this is how background, etc., is going to look. In fact, I'm using a JSON viewer so we don't have to look at directly the text. We have a light and a dark theme, and when there's a light theme, there's backgrounds we can use and certain colors they use. Background, and when it's dark it sort of goes a different way. And all these are being expressed using hexadecimal notation, right, which is, you know, red, green, and blue using numbers between 0 and 256, which because it's in hex, it's, you know, between 0 and F, and F is for 15. And you just multiply 15 by, you know, the two numbers together, and you wind up with between 0 and 255. So this is like, you know, this will be white, you know, FFFFF. This might be much darker, sort of I can intuit here, this is going to be mostly dark colors. Et cetera. But like, you might want to make changes, right? So like, hey, I've got the sort of stock theme here, I want to make very particular modifications. Let's say for the sake of argument, we want to change the surface, right, in dark mode for the success, we want to make this green, right? Because, you know, green can be a pretty good color for success. How would we go about that? And what we need to do is be able to pick out exactly which key we're going to use. Now, when we think about this in terms of dot notation in Xano, that's relatively straightforward. We know what dot notation is most of the time. It's one of the early things people learn when they're working with Xano. And then there's— we know there's something called a set filter, allows us to dynamically, you know, pick out, you know, an item. But what you might not know is that you can actually go another layer down with this, and we can create a function here, and we're going to call this, uh, you know, uh, JSON mod, uh, deep set. Okay, and we're going to modify you know, a source JSON, just like what we had here. So we'll say that I'll take a JSON as, you know, we'll call it source for a second. And we're going to give it a path, right, the thing we're going to modify within it, path. And then we're going to set that path to a new value. I'm going to say, let's say argument, the value is going to be text. All right, so the— so we want basically knowing that we have this original source, we want to change surface, we want change, you know, dark, you know, themes, dark background surface, success, and we're going to make it lime green, which is going to be all zeros except for the green part. And the— and so we have this over here, and we're going to make that change, right? So that means we're, you know, for an input, right? So the thing we're going to do is we're going to say the value is going to be green. Sometimes the word green works too, but we're just gonna keep it hex for a moment. And we want to say that the thing we're looking to change— and this is actually gonna be the key to the puzzle— is going to be using some dot syntax here. So we know what we got here is an object which contains a key called themes. Right, themes-based components layout, right? So we're gonna pick themes. And we're going to say it's themes.dark. Yep, themes.dark.surface.success. And so the way we solve this problem is we say themes.dark.surface.success, right, we can add all of those dots together. And now we will. And then we can add the source here. And the source rather than being a string is going to be the, the actual JSON we just copied. So I'm going to copy this. And save that JSON, and just go into here, right. And now we've got this, I can do a little format, sort of sharpens it up, that sort of tells me the formatting is working correctly. And I can say run, and it won't really do anything very interesting, because there's nothing in the response, right. So the key thing we want to do is do that surgery we were just talking about applying the change at that path. And the way we do it really couldn't be any simpler. We're gonna do a create variable, because you can't update an input, you can only update other variables. And since the source right now is an input, update variable won't work on it. So we're going to do a create variable, and we're going to call it output. And we're going to base it on source. And then we're going to apply a set to it. Alright, but here's the fun part, the set rather than being a string, like you might have done in the past is going to be dynamic, it's gonna be that path all with those dots. And we're going to set the value to the, well, the value that we just passed in, do an update here. Now, I'm just going to comment this out for one second, and say save. And you'll notice that the output is, you know, here, right? So the output should actually be the same as the source right now. So if— and remember that like the thing I just did is commented out, so that means it should give me the exact source that I had at the beginning. So I'd go themes, uh, not background but surface, you know, I have themes dark surface success, right? And we know that we're gonna change theme.dark_surface_success to this other thing, right? The 00FF00, which is sort of lime green. And we're, as opposed to the thing that it currently is. All right, so now we're going to go back into here. We're gonna turn this back on, say save, run that again. And again, I don't care about light. We're gonna take, don't care about background. See the success? It just turned into 00FF00. Which is, I gotta say, pretty slick. Now, we can do more of these, right? We can offer more paths and more values. You could take this as a function and compose it in and like repeatedly give it more paths. And the— and because the path being provided as a variable, that, that can be anything, right? This isn't hard-coded. We could make this into, um, you know, we could say that, you know, I'm not actually adding the code, but I'm just gonna add the input, right? I want to say, uh, you know, theme light surface success. And if I run again, you know, not background, but I'm looking inside light, and then success is now the green. Whereas if I look over at the, you know, the dark part, right, success is still whatever color it was before, which is actually greenish under the covers, but that's because I can read that. But you can see it just modified the one thing that I want to modify. And then, you know, just comes out in the output, right? And you can do this over and over and over to do all of those deep surgical changes that you want to do. Now, when you're working with lists, it can get even more complicated, but like the, you know, if I had a list in there, I could just do it based on the number. I could feed the number in directly of what I'm looking for if I have figured out which index to modify. There's obviously more that you can do, more complexity. We can use it like using find and other sort of looping structures are available to us inside Xano. But if there's one thing you're going to take away from this video today, it's this: you can use set with a full path of dots that take you exactly to where you want to go, make the modification at that value, and then you come back with the modified version of that object. You could then take that object, you can go save into a database, do whatever else you want to do with it. I think when you have that tool in your tool belt, there's a lot more you can do in terms of really interesting data manipulation stuff. I hope you'll let me know what extraordinary stuff you're doing and what other challenges you're finding around doing you know, the sort of high-end data manipulation. A lot of this is just being— a lot of this is often just by being able to think about it rather than like the, the details of exactly how it works within the tool. So if you're having problems with the mental models of it, please drop a comment in the, you know, in the, in the comments down below. But also check out StateChange, which is where we talk about these things in our office hours all day long, because this is the kind of thing I find to be really fun. I hope you do too.
