Welcome back! In this fourth lesson we will learn how to use a data source to render a list of UI components.
In the last lesson we created a card component that we copied multiple times to create a list of cards. We will now learn how to generate the list of cards from data instead.
There are many ways that we can get datasets into our project. An easy way is to use the Static Array node.
This node acts as a text file and supports two standard data formats: JSON and CSV. The node in this lesson comes with a small dataset following the JSON format.
The dataset holds all the data for the Card Items we want to render. It contains a list of titles, categories and dates for each card.
Noodl is built on top of JavaScript, a language with five primary data types: number, string, boolean, array and object.
The editor has nodes designed to store all the different data types, but the most common way of handling data in Noodl is by using objects in arrays.
Let's have a closer look at this pattern.
There are multiple ways of storing data in Noodl, but for our usecase the Static Array node is perfect, since it's the simplest one.
If you look at the structure in the Static Array node you can see that it defines an array that contains multiple objects. Each object has a set of properties.
In Noodl, every object automatically gets a unique id attached to it. This means that we can look up a specific object (using its id) and get its data.
This is one of the more tricky concepts in Noodl, but let's go forward so we can experience how it works in practice.
The Repeater node is used to generate visual components based on an array of objects. It takes a visual component as a template and renders it in place of the Repeater node in the Dom tree.
One component instance is generated and rendered for every object in the array.
Let's first remove the existing Card Item components from the DOM tree, add a Repeater node, and connect it up with our Static Array.
During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the Task label.
If you get stuck you can get a hint by clicking the card in the timeline.
Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry. It's just a concept you will learn in a later lesson.
In this lesson you will be working on the page called Task Page. Navigate to it using the Path Dropdown in the Topbar.
Select the Card Item components and press the backspace key to delete them.
You now have 4 cards in your UI, each with unique data. Let's walk through what happened here.
You already created the Card Item component in the last lesson. There you also created ports on the Card Item using a Component Inputs node. Those ports where hooked up to the properties we wanted to overwrite.
If the port names on the Component Inputs node matches the object keys in the Repeaters array, that data will automatically be passed to the rendered component.
You have now built the basic system for showing cards (or any other type of list) from data. But to take this a step further you can also implement a way to make each card clickable and get its associated object so we can use that data somewhere else.
Just as the Component Inputs node can be used to get data and signals into a component, you can use a Component Outputs node to send data and signals out from a component.
In this case we want to make the Card Item clickable, so that we can receive a signal from the card when it's clicked.
Let's start by creating a Component Outputs node in our Card Item component
Open the Card Itemcomponent, open the Node Picker and place a Component Outputs node anywhere in the node graph.
Remember that the port names are case sensitive
If you just had a single Card component you would now be able to get the click event in the node graph where the Card Item component is placed.
Since the Card Items are generated by the Repeater node, we can't access that port directly, so you need a way to know which of the four cards you click.
Earlier in this lesson we talked about how each object in the array has a unique id. This is really handy, as you can make the Repeater node give us the object id of the card instance we click.
The Object node gives you a way to access an object and its data anywhere in a project. You only need to provide it with an object id.
Objects are generally a good way to share data between different node graphs.
Let's look at how the Object and Repeater nodes can be used together to get the object data from a clicked Card Item.
Navigate to the Task Page component using the Component Panel in the Sidebar. Then open the Node Picker and create a new Object node.
Try hovering over the Object and pin the Data Popup so you can inspect the change when the Card Item.
As you can see you now get the object id, and all the associated data from the specific card that is clicked. This is a very powerful pattern that is used in almost every app.
You've completed the fourth tutorial! Great job!
If you are new to programming, you might be interested in reading a little more about the different data types in JavaScript.
In the next tutorial we will learn how to use the click event on our cards to navigate to a detailed page with dynamic data from each card.
Happy Noodling!