Data Types and Binding


#1

When you have a rich data to bind, specially one retrieved from complex APIs with the API Data Source, it is good to understand the structure of the data.

Your Data Structure

When you call the Data Bindings picker to populate the data on your page you will see the data structure:

From the icons in front of the data you can clearly see, what data you can bind directly and what data you need to put in a repeat region first and then populate inside it.

So in general if you see the bars icon image you need to populate a repeat region first with it. Other data you can bind directly.

Using Repeating Elements

A repeat region can be many things actually. It can be a simple region with paragraphs inside or html table with repeating rows or columns. But it can be more complex elements like Masonry grid or Bootstrap columns.

There are different ways to insert repeating elements depending on their type.

To add a simple repeat children:

image

To add a repeating row in a table:

To add a Masonry component:
image

Binding the repeating element

After you have to repeating element/component inserted on your page you want to bind it to the repeating data. You can do this by setting the repeating expression in its properties.

For simple repeat children, sets its expression:
image

When you make a repeating region in tables it inherits similar properties:

image

And lastly when using a repeated components like Masonry, they have special repeating expressions that you can bind:

image

Binding child data

Once you created the repeating element and assigned its repeating expression, you can start populating the child data inside.

This is done on elements inside the repeat region and their dynamic data:

image

You will see on the expressions that you pick that those are always under the expression from the repeating element:

image

Special repeating data - Keyed Arrays

Normally you will be traversing through array elements as repeating data. Those array elements are known as indexed arrays because their children just go by a sequential number index.

In some special cases there is also another data type that can be very useful to repeat and it is called “Keyed Array” - those elements have their children indexed with a special key as index.

image

So you will recognized those keyed arrays by the cubes icon image

You can repeat those elemements - just as the array elements, but inside them you will have access to additional values like $key and $value to access the indexed key or its value if needed.

image

This can be very useful if you are binding to charts for example and what to have the key name as chart label:

Conclusion

So by now you should have better understanding of the different data types, nested data structures and how you can visually access them and populate them on your page.


WapplerPrevious   WapplerNext



Caching API Data
Using API Data Source
API Data in a repeat region binds incorrectly
API Connect with Aftership
Wappler Official Documentation
API and JSON