#51 array of checkboxes in a Rails app
27/08/2021
Transcript
Hello. In this episode, we are going to go through a really interesting problem. What if we need to have, uh, a lot of different check boxes in the same model? Well, we wouldn't want to really add a lot of bullying, uh, fields into our database. We could just keep it all inside one, uh, column and have an array of, uh, different check boxes. So that's what they're going to go through. They're going to add an array of check boxes. Now, here in the draft application, we have a model of posts, and we can create a post with a title and some kind of content, and they're going to add a few check boxes. Well, for example, the check boxes can be different GDPR, uh, agreements or tags or uh, whatever. So let's try to add some check boxes. Now, first of all, they're going to run a migration. Let's say rails generate migration. Add the tags, two posts, and the texts. Oh, the, yeah, the tags are going to be, uh, a text field. Okay, now let's go to DB Migrate. And they're also going to say that it is going to be an array. So array true. And by default it is going to be, uh, just, uh, square braces. So just a sign of, uh, this being an array. Okay, let's run the migration rails, the beam migrate. And, uh, what would be next? Let's try to play with this array. So if we go to our schema, uh, let's reload. We can see that our posts have, uh, a text field, uh, with text that is an array and that has, uh, uh, square braces, uh, by default. Let's play around with it. Let's go in and say post dot count, no post. Oh, actually we do have on post, let's say post do first, and here it is and has an empty array of tags. So let's say post first tags and run any tags. Let's add the A tag. Let's say, uh, post equals post first post tags, and let's add some tags. Now, there are a few different phase to add tags. We can say like this. So it's uh, an error function. So we would be adding a tag named, for example, Ruby. Okay, let's say post tags and have Ruby and let's say post save exclamation mark to actually persist These changes, you see it has been added. So again, we have post tags and it says Ruby. Now there are actually a few base to add the values to n array. We can say either this, uh, thing or they can say post tags, push. And we would add something like rails. Okay? And let's say post save. And uh, now the post has two different tags. Okay, let's add one more tag with another way. Let's say post do tags plus equals, uh, let's say, uh, ruby on rails. Okay, no implicit. Yeah, we should actually put this in square braces in this case. And let's say post save. So there are three, uh, there's are basically three ways of adding, uh, uh, value into an array. And now let's actually check if this, uh, post has a specific, uh, uh, value in this array. Let's say post, uh, dot tags, dot include. And let's see if it includes something like full. Now it doesn't, let's say if it includes Ruby, yes, it does. Let's say if it see, if it includes just something like rule, uh, no it doesn't. So you see it looks for full, uh, values. And this way we can look for a post that includes something. And now let's try some scopes. So let's say post there tags and where tags has something like Ruby and it doesn't give us anything. Why doesn't it give us anything? Because we are looking for something really direct here. They're looking not for a part of an array, but for a complete array. So if we looked for a post that contains the whole array like this, then you see we find this post and be able to find a post that doesn't, uh, contain the whole array, but contains just something we can write a slightly different back laws. We can say something like, uh, tags and fashion mark, uh, and we would say something like, Ruby, uh, I didn't close the gaps and close this gap. Okay, let's try once again. So a post that includes ruby close gap and it works. Now let's try adding just one more post for an example. I will say post great title will be second and content will be second. Any saved created by not post. And this post doesn't have any tags. Let's just add some kind of tags. Let's say B equals post lost P dot tags, and we'll add some like ruby and p save. And once again, let's look for all the posts that have the, the tag, Ruby, let's say post dot where tags contains ruby. And we have to post, and let's see the post that contains ruby and rails. Oh, actually it looks for all. So here we have again, post dot count. We have both because one post contains, uh, ruby, the other contains rails. So we can all use this all inside the, our, uh, rails application, not only in the console of course. Now let's try to use it not in the console, but inside our application. So from the user side, let's start the server and let's, uh, have a look. So here we have a post and we want to make it possible to see that text. First of all, we'll see the existing text that we have just added in the console. Let's go to our app views posts index. Let's try to display the text. So post tags, okay, so here we have Ruby, and here we have the other three tags. Let's try to create a new post without any tags and see what it shows us. Going back to post, you see it is an empty array and it doesn't look really friendly and human readable. So we can do something different. We can say post text, two sentence. And here you see we have blank. Here we have ruby. And here we have coma, coma. And the last console rub on rails. Or we can say something like post dot tags. Dot map. And inside map we would say something like tag And tag dot capitalize. And here we would have it slightly differently so we have them capitalized and we can say some, again, two sentence, you see. So we are just playing around with this, uh, string here, or we can actually go through each of them. We can say post tags, dot each do tag and display the tag. Let's see if it ox well. Yeah, so okay, now we can display our tags and let's actually make it so that we can add new tags, uh, from our views. So first of all, we'll go to our controllers and add tags as an array in our strong programs. So I'm going to say tags, tick files, and empty array. So now we've right listed them. And now let's see which tags are going to be available. So see in this case, uh, it is cool, it makes sense to use an, uh, array inside the both table if, uh, we have, uh, finite. So, and not an endless number of possibilities. So for example, in our application, there can be only three different texts or 15 different texts, and if we don't tend to add the, any new ones from the client side, so that's, then it makes sense to, uh, have this kind of check boxes that we're going to add. So let's go to our posts, uh, form for example. And here we're going to add an array of check boxes. So, uh, first of all, we'll define the options, the tags that are going to be available in our application. Let's go to our post RB and let's say tags equals uh, uh, let's say Includes ruby rails, ruby on rails, JavaScript, hot wire, and stimulus. Okay, and let's, uh, say something like, uh, e uh, uh, post tags. H do, uh, key. So they're going to have them as keys. Okay? Now they'll have an end statement. And here we're going to, let's say just display all the keys, let's say equals form dot label, uh, key, let's see if the keys. So all the tags get displayed and here are the tags. So we have the tags, and now we want to have a checkbox next to each of them. So we would say form dot checkbox, uh, checkbox. And here we would have, uh, the tags and then we would say multiple at, uh, is true. And, uh, let's see what it gives us. It would also say key and nil to make it work. Let's see. So we have all these tags and check boxes. Let's see if it works. So, uh, with check boxes and we'll say it'll have rails, stimulus, And uh, that's it. I'll just say it in the content and I will check box, rails and stimulus. I press create post. Let's go to our posts. And yes, it has rails and stimulus kind of works. Let's go to edit. And you see none of the check boxes are checked. So if I update the post, what will change? Uh, nothing has changed. If I go back and just try to put Ruby, let's see if anything changes. Yeah, so it sets Ruby, so it is not kind of cool. You see that check boxes that are actually selected are not checked. And to make them checked, they'll need to add the something additional here. So I will say checked. And the ones that are checked will be form object. Do uh, tags and if they run any include uh, key E two s. Okay. And now it'll try to find any texts that are already checked and check them. Let's see if it works. Yes, it seems to work. So let's go to another post. I'm going to the post that we have through different tags in. So here we have through tags, it works. I will add hot fire and JavaScript. Let's see if it gets updated and works. So you see now we can actually have an array of check boxes and it looks really cool. And, uh, now it can be used not only for tags, it can be used for, uh, a lot of different things like GDPR stuff or, uh, different things that characterize your, uh, modal. And it's really cool that you don't have to add the, an additional complexity, but adding, uh, new database table and making relationships like a post has many tags or many G-G-D-P-R bulls, whatever. And you don't have to have a lot of bulls inside your, uh, post. So it's a great way to leverage a raise inside your ribbon rails application. And you see it's really easy. All they've done is we've done this, uh, migration. So text, data, text, text because it can be quite long, uh, array default square braces. Then we went to our, uh, post and said that we are by listing text and array in the form. We've done this, uh, uh, check boxes for each tag. And in the post we've said which tags are available. And that's basically it. So thanks for being with me and, uh, have fun learning.
0