Untangle Dynamic Keys in JSON Objects with @nocodebackend
Ray Deck shows how to flatten nested JSON objects with dynamic keys into a simple array using Xano functions. He uses GetEntries to extract the key-value pairs, then combines them with an update variable to add the dynamic key as a new field on the inner object before appending to an output array.
Chapters
So we have a message from the Xano community, um, looking to understand how you can work with, uh, data that can be parsed in sort of a weird way, which we have an array of objects of objects. And there's some data systems that will, uh, present data in this way and learning how to unwrap objects and turning them back into arrays is pretty helpful. So for example. Here we have an array of say currencies and you can see how the array of currencies has the symbol, right? For the, or the code, right? For the currency on each of these array levels. But you can see how that it has the code and then that code is the key to this outer object. The inner object, it then has values inside it of name and the symbol. Now, it would stand to reason this should just be an array of information about currencies. And you want to know what the name of the current, what the code for the currency is, XOF. You want to know what the name of the currency is. You want to know what the symbol is, right? It's a franc or a Hong Kong dollar. It was HKD, a name and a symbol. And you want to be able to piece these things back together in a way that's going to make more sense. The fact that it's layered like this actually makes the data very hard to work with. Fortunately, we can with Zanna relatively straightforwardly unwrap this data. So let's take this in a slightly more abstract dimension and let's say we're going to have an array and that array is going to contain data that looks in the same structure, right? This is the key, like the code we had for currency down here is the M and the, for the, you know, a couple of attributes that go along with that currency. You can see it sort of applies to anything. And by the way, it could also just be, you know, numbers. If I want the N to be a 2, N to be a 5 or whatever. And so what we want to do now is take this array of information and turn it into an array that's more flat, right? Where like for each item we know about the A, the M, and the N all at the same level because that's gonna be easier for us to like to represent our front end or what have you, right? As opposed to having it be all nested underneath in the object like this. Basically we want to flatten an object. And flattening an object is not as straightforward as flattening an array. It doesn't take that much. So let's talk about how we would do that. First, we're going to consume this data as I'm calling it the argument array, and that's why this is an array here, which we can also pop into the run and debug for the purpose of easy manipulation. Because we're going to take the source data and we're going to turn it into something else, we're going to just collect it into a new variable. That's the way I would take the approach here. And so I would create what I call an accumulator variable, which is, I just call it output. Right here. Now technically this pattern that we're about to do is called a mapping. That's a mapping is when you go through every item in the source array and you apply some sort of transformation on it. It's going to return the same number of elements that you had in the previous, right? So it doesn't summarize it, it just transforms it. In this case, from this set of nested objects into just a flat object, which will contain the, you know, outer key and then the inner m and n. And the way we're going to do that is we're going to set up a foreach loop to go over this array here, right? So it's gonna loop over these two objects and that's what this foreach loop is doing. It's gonna over the input array and each one we're just gonna call item. Then we're going to apply a function you might not have used before, which is called GetEntries. GetEntries is pretty cool. In fact, let's just take a look at it for a second at the output it generates using my favorite function, which is stop and debug. And we will take a look at the item, save, and let's just run it. And you'll see that the, well, this is the original item that we got from the foreach loop. And then we can tell it to tell us about the entries that are in that item, right? So remember, this is an object with a key of A and value. So it's an object which has one member, which has a key of A and a value, which is another object that contains M and N. And now when I look at the entries that got created, you can see that now this is an object with two— this is an array, right, of the single item that's in here, which is just a— because this is an object, this object has a single path, so it turned into an array of paths. First path or key is called A. That's why this is called this here. The value of A, which is this object, is the value here. So we have key, value. That's what entries does. It will take this and turn it into a series of key-value paths. Now this is, we can talk more about how to do more complicated things with getting entries, but like the important thing for us here is that we've now surfaced the A as something we can actually just pull. And so we are going to say, well, we know that each of these only have, each of these objects only has one member. So we're going to want the first item in entries. That's the reason why we were able here to say in our create variable, we're going to look at the first item in entries, which is at position 0, cuz computers think 0, 1, 2, not 1, 2, 3. So the first thing is 0, and we're going to get the member of that that's called key, which we know here is going to be the A. So entries, which is this whole array, the 0, which is the first element in entries, which is this object and then we're getting the member called key, which is going to be this guy here, which means it's gonna return an A. And similarly, we're going to make another one that's gonna do the value using the same basic tactic. We're looking at entries, oh, the zero member, which is this object and the value, which is just this part here. So now we've got an object that contains, you know, an X and a 2. And just to confirm that for a second, we're going to drag this down here and we're just gonna say, tell me what first value is to confirm that it looks the way that we want it to. Yeah, cool. Right. The first value's gonna be the X and the 2, just like we have the X and the 2 up here. So the next key thing we want to do is we're going to update and add this A into this array with the rest of them. Now we know it's already called key, so for, for my purpose, I'm just gonna call it key. You could call it code or whatever. And the way we do that is through an update variable. This is called data augmentation. And so the, we would take the first value, right? Which is this object that contains M, the MX and the N2. And we're going to create a new member of it called key. And we're in that key, we're going to add in the first key. So basically this is, this will say M and N and then it'll also say key because that's another path that we're making on the same object. And that key is going to get populated with the A because that's what the first key was that we talked about before. So if we take that, I can then, you know, take a look at like what first value looks like after we've done that update. And you'll see that it goes from MN to, hooray, MN key. It has a key in there. Now we have all 3 pieces of information sitting at the same level of the object. We have flattened the object so they're all sitting right there at the top. Now we only have one of them though. We need to turn this back into an array of outputs. And that's the reason why we create the output variable up here at the top to begin with. So we're going to now run add_to_end to say, take this value we just generated, this little object here, and let's add it to the array of outputs. That way you'll get, you know, M, N with key of A, and we should get M, N with a key of B. For the latter part. So I'm just gonna tell it to use the little eyeball to disable. And, and what should happen here is we should get the original array, we should loop through the A term and the B term of the two, these two objects. And we should get M, N, and key for each of them, which will then give us the data that we're looking for. Let's see if this works. And then we will return the output variable, which is the thing we created at the beginning, but we keep on adding in each of these loops. So let's run that. Hooray, we got the X, the 2, and the A, right? The X, the 2, and the A, and the Z, the 5, and the B, and the Z, the 5, and the B. And now what we have is an array that's nice and flat and easy for us to manipulate and easy for us to reference what these keys are as opposed to previously where we didn't have access to this. Now, as you might imagine, if you have multiple items in each of these objects, you would, you know, get a little more sophisticated in that, in which case you probably wouldn't be directly accessing the zero of the entries, looping over the entries or something. But those are more complicated use cases and they can wait for another video. I think we have already hit something that's probably in the hardest 5% for most folks. And if it was for you too, I hope you find this helpful. And if you find things are even more challenging, this is the kind of thing that we, kind of problem, kind of more difficult challenging problem that we work on daily over at StateChange in our office hours. Until next time.
