Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Processing New Tags

In this lesson you'll learn how to take the comma-separated list of tags a user enters when creating a new task, and process it into a collection of separate tags. You'll also see how to keep track of all the tags employed across all the tasks stored, so users will have the ability to view a complete list of tags at once.

2.3 Processing New Tags

Hey, welcome back to Create a Foundation for Apps Controller Using AngularJS. In this lesson, we're gonna build on what we did in the last lesson where we are processing the information that's sent through the new task creation form. In the last lesson, we processed the task title and body, and in this lesson we're gonna be processing the tags. And when somebody fills in the tags field on a new task, they're gonna do it via a comma-separated list. And we need to take that comma-separated list and turn it into an array of distinct tags. So down here in our CreateTask function, we're gonna take the comma-separated list that's passed through the tags argument, and we're gonna split it wherever we find a comma. So we'll say, tags.split, and then we'll split it at every comma. And we want to add the resulting array into our task object. So we'll do that by adding task.tags =. Now, there's only one problem here. We don't know necessarily whether a person is going to put a comma and then a space in between one tag and the next, or if they're just going to put a comma. Right now, if there is a space after the comma, then the tag that comes after it is gonna be saved with a space before the word. So what we wanna do is look for any instance of a comma followed by a space, and then replace that with just a comma. And we'll do that by taking our tags information and converting it by saying tags.replace, and then we're gonna say slash, comma, space, slash, g. And what this does is it searches the string for whatever is in between these two slashes here, and the g means it will search the string globally. So rather than just stopping at the first instance of a comma followed by a space that it finds, it's gonna find every instance of a comma followed by a space. And then we give the string that we want to replace those comma spaces with. So add a comma after the g, and then in between single quotes, we'll add just that regular comma. So now we can be confident that when we split that string, wherever we find a comma, we'll have the proper tags saved out into our array. And now when our task object is pushed into our scope tasks array, it will include a proper array of tags for this task. Now, the next thing that we wanna do is start tracking all of the tags that are used in the app, not just the tags that are used on individual tasks, and we're gonna store that information in local storage. So we'll start by making a copy of this code here that we've used to check local storage for any previously saved tasks and to create an empty array if nothing's found. So we'll just copy that and paste it. And this time, instead of using this code to check on tasks, we're gonna use it to check on all tags. So every time we see tasks, I'm gonna highlight that and convert that to all tags. And then we're also gonna change the name of our local storage item to all_tags. So now we have our $scope.allTags array set up. It'll need to be populated with information from a previously saved session, or we'll have a fresh, empty array to work with. And now, in our CreateTasks function, what we want to do is take this array of tags that we've created here and combine it with this array of tags. So if there's already some information in that array, we don't want to destroy it, but we also don't want to create duplicates. So let's say for example we already have some tags saved into our all_tags array. And those tags are A, B, and C. Then our user creates a new task, and that task has the tags C and D. We want to take those tags C and D and we wanna combine them into our allTags array. But we don't want to have two instances of the tag named C. What we want to end up with is the allTags array holding the tags A, B, C, and D. And the way that we can do that is with the concat method. So at the end of our CreateTask function, we're gonna update our $scope.allTags array. And we're gonna update it by saying $scope.allTags.concat(task.tags). So that is gonna combine the $scope.allTags array that we created here with the task.tags array that we created here. Now what we wanna do is get rid of any duplicates, and we're gonna do that with the filter method. So once again, we're gonna update our $scope.allTags array. And this time, we're gonna say $scope.allTags.filter, and the filter is gonna run a function, and that function will work with the arguments element and index. Now, inside this filtering function, we're gonna have to specifically return any entries in our array that we want to keep. So it's gonna go through every single tag that's in our array, and that tag will only stay in the array if we explicitly return it. So we'll say return, and now we lay out the conditions under which a tag should be returned back into the old tags array. And that condition should be that a tag is are only returned into the array if there's not already another copy of that tag there. So in the example we talked about just a moment ago, that tag named C should only be entered into the allTags array. If we search the array and we don't find another tag, they're already named C. I'm gonna run that check using the indexOf method. So we're going to say $scope.allTags.indexOf, I'm gonna check on the index of the element. So that means the index of the tag that we're currently looking at in the array. And we're gonna check that that index is equal to the index of the current tag that we're checking. And the reason that this works is if there is already another copy of this tag in the array, this indexOf method is gonna find that copy earlier in the array than the current tag that we're looking at. So let's say we have two copies of the tag named C in our array. The first one is at index 2, and the second one is at index 5. And now let's say our filtering function here is looking at the second one. So it's looking at an element named C with an index of 5. Then down here, when our indexOf method searches through our allTags array again, the first time it encounters the tag named C, its index is gonna to be 2. So that index of 2 is not equal to the current index that we're looking at with our filtering function of 5. So, then that second instance of that C tag that has that index of 5 is not gonna be added back into the array. All right, so now that we've removed any duplicates that might have snuck into our allTags array, we're ready to send that array into local storage. So we'll grab a copy of this line of code here, and we'll drop it in down here. And now we're just gonna change the name of the item that we're setting from saved_tasks to all_tags, and then we'll change tasks here to allTags. All right, so now we're processing our comma-separated list of tags into an array. We're saving that along with the task object into local storage for save tasks. We're then adding any newly created tags into our allTags already that we're also tracking. And we're committing that allTags information into local storage. So then the last thing that we're gonna do, just like we did in the last lesson, is we're gonna use console.log to put some information out into the console, so that we know that our allTags information is being tracked properly. So we're gonna just change this saved_tasks string here to all_tags. So now when we add a new task, we'll see a little message down in the console that will also show us how our tracking of all the tags that are used across the app is going. And then just one last little thing. Just like we did up here, we're also gonna just add in a little line to help us clear out any data that was used on a previous session for the all_tags item. So we'll save that, and let Foundation recompile. All right, so we're back in our app. We'll add a couple of tasks in so we can make sure that everything we just added is working all right. So we'll add our first task and a description, and we'll add in a few tags. All right, so there's our first task. It's been added in here. We've got our description, our ID, and our title, just like before, but we also have an array of tags. And you'll notice that even though we added in a space after one of the commas, when we're entering that first tag, there's no spaces inside any of these array entries here. And we also have our allTags array, which has tracked the A, B, and C tags that we just entered in. All right, so we'll clear that for now, and we'll add in another task. So we'll add another title, another description, and we'll add in some more tags. All right, so everything is working just how we want. We've got our two tasks have been added in, each with their title, description, and ID. We have one array of tags here, in the first task, A, B and C, and in the second task, we have the tags C and D. And yet, when we look down at our allTags array here, that C tag has not been duplicated. We just have A, B, C, and D. So everything just working just how we wanted it to. Now, right now, of course, we're only seeing our tasks via the console. What we want to do is see our tasks via the UI. That's just gonna make it a lot easier for us to keep tabs on what we're doing. Now, this course is not focused on UI. We're focusing purely on the code in this course. So, what we're gonna do is just use the stock elements that are included in Foundation for Apps UI to display our tasks and our tags. If you do want to get fully into the UI, then we have a course dedicated to that called Up and Running with Foundation for Apps. And I'll include a link to that course if you're also interested in the UI in the notes below this video. But in the next lesson, we're just gonna keep things really functional and really quick, just taking advantage of those pre-built UI elements so that you can keep your focus on the code. So I'll see you in the next lesson.

Back to the top