Let's Add A Conditional Element
Conditionals are for when we want to display content only if a certain condition or multiple conditions are met.
They’re just like a programmer using an “if” statement in code.
Let’s look at a quick example. If you were to think of a number, and run it through this if statement, what would our greeting render as?
If we picked 8, our greeting would say "You guessed it!". But, if we were to guess any other number, our greeting would say "Better luck next time".
Conditionals In Judo
Let's use our simple weather experience from the last lesson, but this time we’ve connected to a slightly different API that gives us a bit more weather information back.
We have our today's temperature section at the top, and in our Forecast section we have the next 5 days now, along with a weather description for each day, all live from our Data Source.
What we really want here though, is a nice icon that represents the weather for each day in our forecast, depending on the description.
We’ve already downloaded all the icons that go along with this particular weatherbit.io API from reading their documentation:
You'll find these icons within the zip file from the Resources section of this Lesson.
We want our icons to appear to the left of our temperature.
And we’re gonna use a Conditional to accomplish this in Judo.
Let’s bring in a Conditional element from our Insert Menu making sure it’s nested under our Collection element somewhere, which is of course nested somewhere below our Data Source element, otherwise they won’t connect.
Now we’ll bring in whatever we want to be conditionally rendered. In this case, it’s going to be an image.
We can now see one image per result in our Array, but since we haven’t added an actual conditions yet, each image is still showing up.
Let’s click onto our Conditional and add one now.
We want to conditionally render our image based on the weather.description key, so let’s type that in now, making sure we always include "data." here as well before our key. “Is Set” is true here, so they’re all showing up still.
However, when we change this to “Equals” and type in “Broken clouds”.
Now we only have the iterations of this HStack matching “Broken clouds” rendering our image.
On our image element that’s nested under our Conditional, let’s load the corresponding icon image. We happen to know that “Broken clouds” matches this particular icon: c03d.png
Let’s add a Conditional for the remaining weather descriptions:
- "Scattered clouds" & "Few Clouds" both use the icon: c02d.png
- "Overcast Clouds" uses icon: c04d.png
And there we have it. Our weather experience is Conditionally rendering our icons based on a particular value in our response.
There’s actually an even easier way to do render these weather icons that we’ll cover in the Advanced Data Sources lesson.
But for now, great work and see you in the next lesson.