Updating an object array based on dynamic index

Welcome to another insightful tutorial on how to work with data in a no-code environment! Today, we're going to dive deeper into manipulating arrays of objects, specifically focusing on updating a nested array of objects based on a dynamic index.

Imagine you have an application that tracks various activities and the groups participating in each activity. You might want to add a new group to a specific activity, or perhaps update some information about an existing group. With Xano's powerful data manipulation capabilities, you can easily accomplish this task without writing a single line of code.

The Starting Point

Let's start by understanding the structure of our data. We have a variable called cards, which is an array of objects. Each object represents an activity and contains a nested array called groups, which holds objects representing the groups participating in that activity.

Here's what our initial data looks like:

[
 {
 "activity": "Rock Climbing",
 "groups": [
 {
 "id": 1,
 "name": "Friends"
 },
 {
 "id": 2,
 "name": "Family"
 }
 ]
 },
 {
 "activity": "Play Soccer",
 "groups": [
 {
 "id": 3,
 "name": "Friends"
 },
 {
 "id": 4,
 "name": "Roommates"
 }
 ]
 }
]

Our goal is to add a new group, represented by the addedObject variable, to the groups array for the "Play Soccer" activity.

const addedObject = {
 id: 5,
 name: "Neighbors"
};

Step 1: Find the Index of the Target Activity

The first step is to find the index of the activity to which we want to add the new group. In Xano, we can use the find_first_element_index function from the data manipulation category.

const index = find_first_element_index(cards, $this.activity === "Play Soccer");

This function searches through the cards array and returns the index of the first element where the activity property matches "Play Soccer". The $this variable represents the current element being evaluated in the array.

Step 2: Update the Nested Array

With the index of the target activity in hand, we can now update the nested groups array. Xano provides the set function, which allows us to update variables or properties within an object or array.

set(
 cards,
 [index, "groups"],
 append(get(cards, [index, "groups"]), addedObject)
);

Let's break down this function call:

1. set(cards, [index, "groups"], ...): We're updating the cards variable, specifically the groups property of the object at the index position.
2. append(get(cards, [index, "groups"]), addedObject): This is the new value we're assigning to the groups property. We're using the get function to retrieve the current value of groups at the specified index, and then appending the addedObject to it using the append function.

After executing this code, our cards variable will be updated with the new group added to the "Play Soccer" activity.

[
 {
 "activity": "Rock Climbing",
 "groups": [
 {
 "id": 1,
 "name": "Friends"
 },
 {
 "id": 2,
 "name": "Family"
 }
 ]
 },
 {
 "activity": "Play Soccer",
 "groups": [
 {
 "id": 3,
 "name": "Friends"
 },
 {
 "id": 4,
 "name": "Roommates"
 },
 {
 "id": 5,
 "name": "Neighbors"
 }
 ]
 }
]

And that's it! You've successfully updated a nested array of objects in a no-code environment using Xano's powerful data manipulation functions.

Wrapping Up

In this tutorial, we explored how to update a nested array of objects based on a dynamic index. We learned how to find the index of the target object, and then used Xano's set function to append a new object to the nested array.

Working with complex data structures can be a daunting task, but with Xano's no-code approach, you can streamline the process and focus on building amazing applications without getting bogged down by coding technicalities.

Whether you're a no-code enthusiast, citizen developer, traditional developer, or part of a startup or small business, Xano empowers you to build and deploy backend services for web and mobile applications with ease. Embrace the power of no-code and unlock new levels of productivity and innovation!