Xano - Variables (with examples)

Hey there! In this guide, we'll dive into the world of variables in Xano, a powerful feature that allows you to manipulate your data like a pro. Whether you're a no-code enthusiast, a citizen developer, a seasoned programmer, or part of a startup or small business, this guide is for you. Let's get started!

What are Variables?

Variables are a way to store and manipulate information or data. Oftentimes, the data in your database tables might not be in the exact format you want to present it in your front-end application. This is where variables come into play. During the API call, when your API pulls the data from the database, you can use variables to process and manipulate the data, ensuring it's displayed in the desired format on your front-end.

Step-by-Step Guide to Using Variables

1. Accessing Data from the Database

Let's say you have a "Deals" table in your database, and you want to display the "promoCode" field from that table in your app. Here's how you can do it:

1. Go to your API page and navigate to the specific API endpoint you want to work with (e.g., `getDealsByID`).
2. In the response section, use the dot notation to access the desired field: `deals.promoCode`.
3. Save your changes, and when you run and debug the API endpoint, you'll see the promoCode displayed.

2. Formatting Data with Variables

What if you want to display the merchant's name in all capital letters for aesthetic purposes? No problem! Follow these steps:

1. Go to the `getMerchantByID` API endpoint.
2. In the function stack, click the blue "+" button and select "Data Manipulation" > "Update Variable".
3. In the "Update Variable" window, set the "Existing Variable" to `merchant.name`.
4. Under "Filters," choose "Text" > "toUpper".
5. Save your changes, and when you run and debug the API endpoint, the merchant's name will be displayed in all capital letters.

3. Converting Data with Variables

Let's say your app deals with gift cards, and the "amount" field in your "Deals" table represents the discount in dollars. However, you want to display the amount in euros for your European friends. Here's how you can achieve that:

1. Go to the `getDealsByID` API endpoint.
2. In the function stack, click "Data Manipulation" > "Update Variable".
3. Set the "Existing Variable" to `deals.amount`.
4. Under "Filters," choose "Math" > "Multiply" and enter the conversion rate (e.g., 0.85 for dollars to euros).
5. Save your changes, and when you run and debug the API endpoint, the amount will be displayed in euros.

4. Creating and Manipulating Lists with Variables

Sometimes, you might want to display a list of data from your database. For example, let's say you want to display a list of all the discount amounts from your "Deals" table:

1. Go to the `getDeals` API endpoint (query all).
2. In the function stack, click "Data Manipulation" > "Create Variable".
3. Name the new variable (e.g., `var1`) and set its value to `deals.amount`.
4. In the response section, set the variable to `var1`.
5. Save your changes, and when you run and debug the API endpoint, you'll see a list of all the discount amounts.

5. Performing Calculations with Variables

What if you want to add up all the discount amounts from the list you just created? Here's how you can do that:

1. In the `getDeals` API endpoint, go to the function stack and click "Data Manipulation" > "Update Variable".
2. Set the "Existing Variable" to `var1`.
3. Set the "Value" to `var1` as well.
4. Under "Filters," choose "Math" > "Sum".
5. Save your changes, and when you run and debug the API endpoint, you'll see the total sum of all the discount amounts.

Conclusion

As you can see, variables in Xano provide a ton of flexibility and power when it comes to manipulating your data. Whether you need to format text, convert units, create lists, or perform calculations, variables have got you covered. Don't be afraid to experiment and explore the various filters and options available in Xano's documentation. Have fun manipulating your data like a pro!