So we just learned how to store data in our database.

We've got some input fields in our app, and we learned how we can route or store the values of those inputs into a data type like a trip and save that within our database.

But now we want to know how we can essentially do the reverse, right?

If we swap these guys around, we've got a bunch of trips in our database.

And in your case, it could be posts, projects—it doesn't matter.

You've got a shelf full of some specific type of data.

You've got some interface, and of course it doesn't have any values in it.

You want to pull some data dynamically from your database and display that data within your interface.

So if we imagine this is the one that we want to display within our interface—this is it, kind of in scaled-up mode—and here are all of the field values inside, what we're interested in doing is figuring out how do we get all of these input values out of the data type, out of our trip package, and onto our interface.

To demonstrate this, I'm just going to put a new group onto our page here, and this is just going to show the latest trip—the latest, most recently created trip.

Nothing too fancy.

And I'm just going to give it a little bit of margin from our create group and perhaps a slight background as well with a little bit of padding.

This is not by any stretch the final design here; this is just so that we can get our bearings and build a little bit of intuition for what's happening.

Now, any container like this group can have its type of content set.

I can set this type of content to one of the data types that I've created, like my trip data type.

So this is the equivalent of just setting up a landing zone, a placeholder for a trip to come in and land, so that we can do something with it.

It's a place that is configured to hold a trip data type specifically.

And what's nice about having a container like this group that has a type of content is that any elements that I place inside—like, for example, this text element—have access via dynamic data to the parent group's data source, in our case the parent group's trip.

So this is the equivalent of just setting up another landing zone, if you will, another area, a container that's configured to hold text but where the value is actually going to be pulled in from the parent container.

And what that means is that if we go and we store a trip from our database inside of this trip container, this group, well then these elements inside can unpack the content, the fields from the trip, and display them out through themselves.

These are essentially little windows that allow us to shine through to render the values that exist within the parent container's data type—in this case, the parent container's trip.

And so I can set the value of this text element to be the parent group's trip, and then I can unpack or access one of the values from that trip, like for example the title.

So that's the equivalent of setting up this little relationship between the parent container and a visual element—in our case, a text element inside.

But what we still need to do is configure the logic for actually bringing in a trip into this container in the first place, right?

Now it's just empty, it's not holding anything, and so this text element is going to be empty.

We need to add some kind of logic to our application which is going to take our database of trips, our shelving unit of trips, and pull one of them out.

Right?

And then if I just blow this up once it's pulled out, it can then be slotted into or accessed by this group within our app's interface.

Now, there's more than one way of doing this, but the simplest way for what we're trying to do is just to set this data source field for the group.

So if I click on here, I have this data source option called Do a search for, and this will give me the ability to search for one of the data types in our database.

So in our example, of course, we're looking for a trip.

Now if I just close this out, you'll see that this expression is red—we've lost that beloved blue look.

And what we also have over in the toolbar up here is something telling us that we have one issue.

If we go and we click on that, this is the issue tracker.

And this is telling us all of the areas of our application that are currently broken, where we're trying to do something that doesn't make sense.

And specifically, we've got an issue related to what we just set up within our group, which is that we've set the data source to be a trip.

However, what we're trying to put into that group is a list of trips.

So the data source should be a single trip; we're trying to put in multiple trips, and that's why we're getting this error.

So here's our trip container configured to hold a single trip.

What we're doing right now is we're looping in the database, and we're grabbing all of the trips that we have, and we're trying to push all of them into this container, into this group, which isn't possible because this trip is only configured to hold one of these.

So what we need to do is instead of trying to send all four of these—for example—we just choose one, and that is the one that we end up rendering here, right within this group.

So to fix this, we're just going to click on the end of this expression to open it back up, and then we can choose here if we want to grab the first item in that list, the last item, we can even choose a random item or a specific item in the list like item number three.

We're just going to choose the first item for now.

And you can see here that that issue went away.

And if we click off here, then we have that beloved blue look for our expression again.

Now, to help with testing and observing this feature, I'm going to go into the Data tab.

You might want to do something like this yourself.

Now I'm just going to select and delete any entries that are empty, that don't have any values on them, because that's going to make it a little harder for us to test if this feature is working.

So we know that there's three trips in the database here, and one of these guys should be appearing.

So if I load my preview here, indeed, we see here Italy family holiday is what we're showing.

And Italy family holiday happens to be the first trip that we have here in the list.

It was created earlier than all the other ones.

If I wanted to show the most recently created trip, I could just change the sorting within this search.

So I could sort by the created date, and I can set this descending value to be yes.

This is going to put the most recently created trip at the top.

Or another way of looking at it is the trip with the highest date—that is, the furthest into the future—is going to be at the top here.

And then we're going to descend down into dates that are further back into the past.

And so if I refresh my preview, you see that we're seeing the most recently created trip appear here.

And if I add another one, you see that that then replaces the trip that you saw before, as this is now the most recently created trip.

Okay, so that's cute, but what we really want to do is something more like this, right?

Showing a list of trips, not just a single trip.