Looping and Transforming Arrays with @nocodebackend
In this tutorial Ray Deck addresses a frequent pain point for members of the StateChange and XAML communities: how to transform large lists of objects in a no‑code environment. He demonstrates the four fundamental array operations—map, filter, sort, and reduce—using Xano’s function builder. Starting with a reusable function called “array demo,” he creates a JSON input representing an array of objects, then walks through each operation step by step. Mapping is shown by iterating with a foreach loop and updating each item (adding a new key). Filtering and sorting are performed via Xano’s filter interface, including dynamic path handling and the nuance that sorting is implemented as a special filter. Reduction is illustrated by building an accumulator object that counts occurrences of a field, using dynamic GET and SET operations. Throughout, Ray shares practical workflow advice (filter first, then map, then sort) and performance tips (avoid nested loops, use find‑all‑elements sparingly). He closes by linking the techniques to broader community support in StateChange and XAML, inviting viewers to ask questions.
Chapters
One of the most common questions that I hear both in StateChange as well as in the various communities I'm on, and particularly within XAML Community, is really about the transformation of data where people have big lists of things, sometimes they have objects of things, and they're trying to either extract data, turn it into something else, what have you. In fact, over here on XAML Community, they have categories for their Ask Community section, which is where basically they're asked for help. And I'm pretty sure the most popular one is the transforming data. Not because it's the thing that most people are doing all the time, but it's because the thing that people run into and then they have a conceptual problem with it, right? How do I think about taking this big list of things and turning it into something else? Today we're gonna talk about how to do that with arrays. And it's worth thinking about these lists of either objects or strings or whatever else as things that we can manipulate. And there are 4 main ways that you manipulate a string or manipulate a list, an array. And it's true in Xano and elsewhere. And unfortunately there's like pretty good learning material out there about the theory of it. And in JavaScript we call them filter, map, reduce, and sort. These are the 4 big ways that you can take one list and turn it into something else. And Xano lets you do all of these things. It lets them do them relatively easily and sometimes it doesn't give them those names. But if we have those names, we have the ideas of how these things work, we can be making some pretty cool things happen for us. So let's talk about how we would do that within Xano. I'm going to go, go into Xano and as I often want to do in these videos, I'm not going to go create an endpoint. I'm just going to create a function because functions are, are ways we get a lot more control over our inputs and outputs. Create reusable code elements within Xano too. Call this array demo. And the, um, and then just create an input for us, uh, which I'm going to create as I usually do when I'm creating a complex one, I just choose a JSON type because that way we don't have to, you know, go structure a lot of stuff in detail. Uh, and I'm just going to call this, uh, source. Um, and the, um, I'm just going to do a, you know, run a debug here. I'm just going to create what source will look like. Source is going to be an array, which means it's a list that's used with the square brackets when we're doing this in JSON. And I'm going to make this into a list of arrays. Oh, sorry, a list of, make a list of objects, right? So I'm going to say they're objects and objects have curly braces. Those are the blue things you see here. And I'm going to say it contains a key of a and a value of x. Key of A and a value of Y, a key of A and a value of Z. And then finally, I'm going to make sure this also has a key of B and a value of, let's see, D. This one will also have a key of B and a value of D. Remember the D here has to have quotation marks for the JSON to work. JSON's a real pain actually to create by hand. So this is why we usually use code to create it. And then I'll have another one here that's going to be key of B, value of C. So obviously these two have something in common, these two don't, great. So the main ways that we can manipulate things are going to be through, in my function stack, I have a number of methods largely under data manipulation. That allow me to manipulate arrays. And those are my loops that I have here where I can loop over either using going over each element in an array, or I can loop over just a set of numbers, 1, 2, 3, 4, 5. And then I also have the ability to loop and basically, well, these are 3 things I can do inside a loop, which are to break out of it, so stop running it. Continue, skip to the top of the next loop, and remove an entry from the, from whatever the list is that's being iterated over. Most of the time we're using foreach because it's the simplest to work with and it's really powerful, and the for loop sometimes for specific situations. So most of the time we're going to be doing a foreach. And foreach of my inputs in source as item. And this is, you know, and this becomes core to how we do most of our manipulation in Xano. So I can say for each source's item, I'm going to, well, let's use a utility function here. And we're just going to do a stop and debug because that sort of can be a useful way to think about things here. And we're going to look at item. Now item is what we call an iterator variable. And that means that like as we're iterating over source, you know, first we're going to have AB and then we're going to have AB and then we're going to have AB and each of those gets populated into item one at a time. And just to prove that this is gonna show item with X of C, it's gonna be this first item in there. And I'm gonna put into, do, do, do, do, don't need to worry about the response because I'm just stopping and debugging, right? So it shows me X and C, which is the first object I have in here, even though I've also got these others. Now at this point, we get to think about our first of the major things we're going to work on here, which is idea of mapping. Mapping is really how we do data augmentation up or down. Augmentation is one of the most common things we do. Like there's something you have in all these elements, you want to put in something calculated about it, right? So it is possible that for each of these elements, you want to add, for example, another key called C with a value of YouTube. And so we can do add here and I can do data manipulation and we do update. Update variable is the way we're going to be doing the mapping. We augment it by saying the existing variable of item.youtube. And this is actually the sort of, we'll call it C. This is a key idea that you had item which already exists and the C path to it, which doesn't exist yet. But we can, by updating it to YouTube, you can say save, comment out the stop and debug, as I sometimes say, wink it out. I'm gonna have the response just tell me what the entire source is. Now I've actually made a mistake in here because if I want to loop over an input, I'll never be able to change it. So that actually doesn't work for augmentation. So what you need to do if you're taking something in that you want to make modifications to is we'll need to do data manipulation and we'll need to create a variable I'll call it output. That's gonna be based on the source. Right, so I'm setting myself up that I want to iterate through, move this out of the way, that I want to iterate through, ooh, where'd it go, friend? All right, we're gonna put you over here and then do, do, do, do, do, do, right? Put that up here, right? So now we're gonna actually loop over not my source, but rather my output. Back here. Great. What this will do is make sure that like whatever I'm going, whatever I'm iterating over is something I can actually modify because my relationship with inputs is always read-only. So I can do a rerun here and then I can add my response. Now my response, tell me about the output. Save. Rerun. See, now it includes See YouTube because I just updated. This is what we call a mapping where we are augmenting that dataset to turn one list of, in this case, 3 elements into a second list of say 3 elements. And augmentation is one of the proper ways of doing that. We can also, you know, remove things, we can add, we can do whatever we want to do to each item individually. And that's pretty handy. So that's what we call mapping. And of course you can nest these to go as far deep down into an array as you like. So a second thing we might want to do is going to be filtering that array. Now filtering is not something you actually do inside a foreach loop, well, unless you've got very complicated logic, which you might. But let's say we want to do a data manipulation and this time we're gonna go down to the array variables and we're going to say we want to find all elements. This is the most common sort of filter. All the elements in output. And we click into here. This is kind of like building an if-then that goes inside, inside the statement. And we're going to say where this, and remember how item was the iterator variable in that big foreach loop? This is the equivalent of item inside the context of a filter. We say where this is equal to Well, actually more specifically, this B is equal to the letter D, right? And because here we'll remember that, like I said, two of these have a B of D and the other one's B is just the letter C. Okay, fine. So this will pick out all the ones that are D and the result variable will be filtered. I'll just call it that variable filtered. And then what I can do is say I want to take the output and instead of looking at the output, I want to look at filtered. And I'll rerun. See, now it only includes these two elements. But the cool thing is it actually ran my, my mapping to augment the data as well as applying the filter, which is super cool. You know, another thing I can do here is I could take this and say I just want to be the output for the result. Put this up here and then have it come back and just have output turn into output, right? I can, I can edit it in place. It allows me to start stacking some of these ideas, right? I can do a filter and then I can do an augmentation. And then, yeah, and then I get the best of both worlds. By the way, if I just comment out this foreach loop, you can see I don't get my augmentation. I don't get my mapping. It just has the original data., but it was still subject to the, the sort that I did in there. In fact, let's just illustrate the fact that there's a sort to this because I'm just going to put something out of place. Um, uh, well, sorry, the filter, right? So this is filtering correctly, but let's add one more item, which is the idea of a sort. So we're going to then say we've got all that data. We're going to do data manipulation. We're going to do, um, You'll notice in here while we do filtering, it doesn't have anything actually about a sort. That's because it handles sorts as a, if you'll forgive the pun, as a filter, which is sort of the mini function style that Zano has. And so the way that we do that is by going to Damien, we're just gonna update a variable and the variable we're gonna update is output and we're gonna set it back to output subject to a filter and that filter is sort. And now we can filter it based on whatever that internal element is that we want to make sure that we're sorting on. So let's sort it based on A. Now, this actually gets to a really key thing. You can do this dynamically. You could set the path you want to sort on completely dynamically. You could set it based on a variable, but most of the time you won't want to. So if it happens that your path shares a name with a variable, like let's say that my path was called let's call it output. And you see all of a sudden it does var any. Most of the time that's actually a bad thing. So you want to, so if you have a path, you know, the dot part that's inside your object of something that's going to conflict with one of these variables, you want to choose const text, you see, and turns it into the text, which is exactly what we want. In my case, I just want to be sorted on A. Update. Now, as it happens, I'm pretty sure this stuff here is sorted by A, so I'm going to add one more object here. And I'm gonna say, you know, with an A of P, right? 'Cause it'll be out of order. And I'll say a B of Q, okay? So now I'm going to save that. In fact, I'll make it D right now, that way it'll be subject to the same filter as the other guys. So right now it's YZT, and if I didn't have my filter, I'll just wink it out here, and I do a rerun, you'll see it gives me YZT in that order. But if I add that sort, remember we said we're going to sort by path A, just turn output back into output. Now it goes T-Y-D. All right, so now we've talked about 3 things. We talked about how to map, which is just to use the forEach to go over things. We've talked about the filter, which is the, you know, hasAll or hasFirst, and there are a few other ways of doing that. And we've also talked about sort. Combining, say, map and, you know, you can combine things like mapping and sorting. The easy way to sort is going to be to, you know, if for example, if you want to sort based on, you know, the combination, you know, of these keys for whatever reason, what I would do is I would first augment the data by doing the, you know, by doing the foreach here and then do the sort. So usually what I tend to do is I will do a filter first if I can. Second, I will do a loop, right? And then based on what I have to augment the data, and then I'll usually do my sort of that loop at the end because that's what I'm preparing for the endgame. That way, whatever I'm filtering and sorting, I'm doing over fewer records because I've already filtered them. And the sort is usually the thing that can mess up the most as I edit my data, right? Because usually like, how do you want to sequence something is the thing you do after you've decided which things you want to sequence. And that'd be the question of the filtering and of the sorting. And sorry, the filtering and of the mapping, the augmentation. But then we said there were 4, right? So we've talked so far about 3 of them. We've talked about filtering, we've talked about mapping, we've talked about sorting. Let's talk about the one that's kind of missing in all of this, which is the idea of reducing. And I gotta say that like most of the really hard questions I find about data manipulation are about this issue of reducing. So what is reduction? Reduction is going to be when I take a list like this and I wanna turn it into something smaller, right? So let's just say I'm not going, you know, do create variable and I'm gonna comment that out. I'm going to comment this out. I'm going to comment this out. Let's talk about how we do reduction. So one example of a reduction is I want to know, say, I just rerun this, you'll get everything back, right? X, Y, Z, T. So how about this? I want to know how many of these have, for each B, I want to know the count of each of the other keys, the B, the C, the D, the D. So that would result in 2 records that should be coming back out. And basically an object, right, of each of these keys and how many there are of each. So I want to have C, 1, and then 3 of the Ds. That idea is one that can throw people immediately for a loop, but it doesn't have to. The way that we do a reducer in this case is we set it up in 2 parts. The first is we define our output, which is gonna be an accumulator variable. Or that's the technical name for it. And we're just gonna use that name just to, you know, create some clarity here. And we're gonna call this accumulator. Now the initial shape I want to give the accumulator is gonna matter. So I know that what I want to do is create an object at the end that's going to be of the B, the D, the D, the D, right? So let's do that. And to do that, I const and I say I want this to be an object. Excellent. Now I'm going to do a plus and I'm going to do a data manipulation. I'm going to do a loop, a foreach loop, and I'm going to loop over my output, right? As item, just like we did before, right? This is the same as the mapping thing in terms of how it starts, but it's not the only thing we're going to do, right? But instead of adding things into output, we're going to put things into accumulator based on what we've learned. So we're going to say, and I'm just going to make this a little more verbose so it's easy to understand. I'm going to say, you know, call it b_value. That's going to be equal to item.b, right? And we're just going to, this is my habit, I always do stop and debugs as I go through this just so I can see what the data was that I just created. And I'm going to say that's my b_value, save. And rerun. Yeah, cool. So you can see my current bvalue is C for this, right? Now I want to find the stored bvalue from the accumulator. So I'm gonna do create_value and I'm going to say accumulator_value, which is going to be accumulator. Now I can't use dot notation here 'cause I actually don't know which key I'm going for. So I need to do it dynamically. I'm going to say GET, and I'm looking for the element called C in this case, but actually what I really want to do is know what the B value is, right? And it also looks for a default, and the default here, because remember we're going to be doing counts, so the default should be 0. If it hasn't found anything, that means we currently have 0 of those Cs in there. We'll save that. And now what I can do is by getting the original accumulator value, right? I can do data manipulation, math, and I'm just going to add the exist— add to the accumulator value 1. I like to— you can obviously do this through like an update variable call as well. But this is really nice because it's so easy to read. And so I could, we've got the original value, which is the accumulator value, which would've been 0, right? I can add a 1 to it 'cause I just found the number of Bs. And then I'm going to basically save that back into my accumulator again. So I'm going to update my accumulator with basically back into the accumulator. And this is an important variable too 'cause if I don't know which key at the outset I want to modify, I just do it through a set, setting it to my, the path of whatever B value is. Remember before I was saying you wanna be careful of not doing this too dynamically? This is an example where we want to do it dynamically 'cause the B value right now is C. So I'm going to set the path at C to the value of whatever my new accumulator value is, which at this point should be 1. So save this and then I've got the, the accumulator all set up here. So now I'm going to find out what the B value is, which is C. I'm going to find out what, what the accumulator currently thinks C is for, which is 0. I'm gonna increase that by 1 and save that back into the accumulator. It's kind of like mixing together these ideas of dot data augmentation we were doing with the map at the beginning. But creating a new array that, or new object in this case, as a new shape. Fantastic. So what I'm going to do down here is I'm going to say, in addition to getting the output, I'd also like it to output the accumulator. Save that. And, you know what, let's, we'll have it call that output. Right, this allows us a response to have two elements to it. And we'll just run that. Now we can see we got our output, which is, you know, the array just like we had before. We haven't changed anything about it. And then we have our accumulator, which knows there's 1 C value and 3 D values in it. So this is how we can do some relatively straightforward transformations using the 4 big ideas in arrays where we can sort, right? That's the issue of, in most cases in XAML, that's really a one-liner. That's the, excuse me, sort. What was I saying here? Yeah, sort. Sort is a one layer that we do through a filter. And if we do the, if we've set up the data that we know to sort on, it makes it much, much easier. The second is we can filter and that's where we actually use a function. It's a little ironic that sort uses a filter and filter uses a function, but if we can get past that, we'll be fine. Where find all elements is the best one for this job. And that will just collect everything and put them in the right order. Also just quickly note that for significant amounts of data, find all elements is kind of slow, so you don't want to use it all the time. You know, so we do our filtering, you know, once if we can and not have it be in some nested set of loops. The, we can map by using, largely using the for each and update variable combination where we are updating item that's sort of the best way I found to be doing mapping. Although obviously we could also create another external, you know, result to the mapping depending on like what your, what your particular needs are. So filter and sort are kind of one-liners. Map is a combination of using forEach and, you know, usually updateItem. And then reduce, the big idea in reduce is it's just like mapping, you're doing it foreach, we are putting the data into this external variable that we call the accumulator in order to, you know, create whatever that, that, that new shape is going to be. So mapping will always return a list of the same number of elements, whereas the accumulator could be a string, it could be another list with a different number of elements, it could be an object like we're doing right now. Like really the sky's the limit if you use these four primitives. These conceptual primitives as resulting in working with arrays of the filter, the map, reduce, and the sort. You can do anything with manipulating data. You can do that and you can do that in all sorts of tools. But one of the very cool things is we can do it in no-code in Xano. Data manipulation is also, in addition to being part of the Xano community, was something we do all the time in the state change community because it's it's not particularly about product knowledge, it's something that's intersectional we're dealing with all the time at various levels of our applications. So if you're working with something that's kind of data intensive and you're having more complicated issues, please come check us out over at StateChange too. But if you've got questions about what we've just been seeing here, please put it into the comments and, um, I'm looking forward to hearing from you and we'll see you next time.
